0

我在选择具有我知道的 ID 的特定 textarea 元素时遇到问题。最糟糕的是，我必须处理的 HTML 页面包含两个具有此 ID 的文本区域。我知道这是不对的，但我无法控制那部分。

因此，在该页面中，我有两个主要元素：<div id="left_column">并且<div id="right_column">都包含一个元素<textarea id="CPR_DESCRIPTION">

在 left 和 right_columns div 及其各自的#CPR_DESCRIPTION子 textarea 之间有大量其他元素，它们在每一侧都相似。

我希望分别选择这两个#CPR_DESCRIPTION文本区域（因为我必须将 's 的内容添加#left_column到#CPR_DESCRIPTION' #right_columns 中）但到目前为止我所有的尝试都失败了。

我试过了：

$('#left_column textarea#CPR_DESCRIPTION');

$('#left_column, textarea#CPR_DESCRIPTION');

$('#left_column').find('textarea#CPR_DESCRIPTION');

值得注意的是，我设法以#left_columndiv 的形式检索，但在检索时#CPR_DESCRIPTION，没有成功。另请注意，#CPR_DESCRIPTION它不是#left_column.

这是所要求的HTML的相关部分（为可怕的东西做好准备）：

<div id="left_column">
  <div id="property">
    <div class="body>
      <div class="inner">
        <iframe id="property">
          <html>
            <body class="dialog">
              <div id="G360Layout">
                <form id="fieldsForm">
                  <div id="mainContainer">
                    <div id="container_2">
                      <div id="fields_container">
                        <div id="container_Description">
                          <div id="component_188">
                            <table>
                              <tbody>
                                <tr>
                                  <td>
                                    <textarea id="CPR_DESCRIPTION" name="CPR_DESCRIPTION">
                                      egeezezez
                                    </textarea>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </body>
          </html>
        </iframe>
      </div>
    </div>
  </div>
</div>

所以这是我必须处理的怪物，正如你所看到的，已经有重复的 ID，最糟糕的部分是#right_column完全相同。

这是我的 jQuery：

function doOnLoadLayoutDescription() {

alert("inside doOnLoadLayoutDescription");

var leftColumn = $('#left_column');
//alert("leftColumn.length="+leftColumn.length);
//var description = $('textarea#CPR_DESCRIPTION');
//var description = leftColumn.find('textarea#CPR_DESCRIPTION');
var description = $('#left_column').find('textarea[id=CPR_DESCRIPTION]');
alert("description.length="+description.length);
if(description.val()) {

    alert("inside description.val()");

    var text = description.val();

    alert(text);

    var rightColumn = $('#right_column');
    var readOnlyDescription = rightColumn .find('textarea#CPR_DESCRIPTION');
    if (readOnlyDescription.length) {

        alert("inside readOnlyDescription.length");

        readOnlyDescription.val(text);

        alert("switch done");

        }
    }
    alert("ouside doOnLoadLayoutDescription");
}

注意：我稍微改变了这个问题，因为我说它是一个 div 但它是一个文本区域，即使没有太大变化，现在纠正这个问题可能是个好主意。

注意 2：此 HTML 页面是从一个 .jsp 页面生成的，该页面是称为 Case360 的案例管理系统的一部分，该系统并不为人所知。由于 .jsp 的所有内容都是通过拖放式布局构建器生成的，因此它解释了为什么这个 HTML 几乎不可能舒适地阅读。

编辑 我认为我发现了问题：我放弃的脚本实际上被包裹在 iframe 元素内，因此只在该框架内搜索，因此找不到我的 #left_column 元素。我已经尝试将它放在 iframe 之外，以获得整个页面的范围，不仅是框架，而且我的表单的调用另一个脚本的脚本现在找不到它。为了正常工作，我需要找到一种摆脱框架的方法。我现在正在努力。

有什么想法吗？

4

3 回答 3

2

由于 jQuery 可能不允许重复的 ID 选择器（因为它不应该），试试这个：

$('#left_column').find('textarea[id=CPR_DESCRIPTION]');
于 2013-03-08T14:16:08.093 回答
0

ID 必须是唯一的，所以就$("#CPR_DESCRIPTION")可以正常工作。

但是，在一般情况下，您应该.find()像这样使用：

$(somelement).find(".selector");

但是，如果您知道第一个元素的选择器，则可以使用简单的后代选择器：

$("#someelement .selector") // any level deep
$("#someelement>.selector") // only first-level children
于 2013-03-08T14:19:37.363 回答
0

最后，我能够完成这项工作。因此，正如我在 EDIT 下的问题中解释的那样，主要问题是我的脚本被包裹在<iframe>元素中。这使得#CPR_DESCRIPTION使用简单的$('#CPR_DESCRIPTION'). 剩下的问题是能否进入第二个<iframe>找到第二个#CPR_DESCRIPTION。为了做到这一点，我奇迹般地在一个旧项目的一些黑暗地方找到了一个可以完成这项工作的函数。不过我不太了解（是的，我知道这不好）。但这是该函数的代码：

function getFrameElement(fFrames, sName) {
    var frame = null;
    var retFrameEle = null;
    var i = 0;
    for (i=(fFrames.length-1) ; i > -1 ; i--) {
        var fFrame = fFrames[i];
        if (fFrame.name == sName) {
            retFrameEle = fFrame;
            break;
        }
        if (fFrame.id == sName) {
            retFrameEle = fFrame;
            break;
        }
        retFrameEle = getFrameElement(fFrame.frames, sName);
        if (retFrameEle != null) break;
        }
    return retFrameEle;
}

我只是这样调用这个函数：getFrameElement(top.frames, "doc_content")“doc_content”是我正在寻找的框架的id和。name

请注意，这是用基本 javascript 编写的，这意味着我需要继续使用基本 javascript 并简单地使用

getFrameElement(top.frames, "doc_content").document.getElementById("CPR_DESCRIPTION");

找到了第二个#CPR_DESCRIPTION文本区域。

感谢所有帮助过的人：）

于 2013-03-12T09:55:45.957 回答