Question

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

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

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

我希望单独选择这两个#CPR_DESCRIPTION textarea（因为我必须将#left_column的{{1}}的内容添加到#CPR_DESCRIPTION的内容中）但所有内容都是到目前为止，我的尝试都失败了。

我试过了：

#right_column

值得注意的是，我设法将$('#left_column textarea#CPR_DESCRIPTION'); $('#left_column, textarea#CPR_DESCRIPTION'); $('#left_column').find('textarea#CPR_DESCRIPTION');作为div进行检索，但在检索#left_column时却没有成功。另请注意，#CPR_DESCRIPTION不是#CPR_DESCRIPTION的直接子项。

以下是HTML的相关部分（让你的眼睛看到可怕的东西）：

#left_column

所以这是我必须处理的怪物，因为你可以看到已经有重复的ID，最糟糕的是<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>完全相同。

这是我的jQuery：

#right_column

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

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

修改我想我发现了这个问题：我放弃的脚本实际上被包裹在iframe元素中，因此只在该帧内搜索，因此找不到我的#left_column元素。我已经尝试将它放在iframe之外，以获得整个页面的范围，不仅是框架，而是我的窗体调用其他脚本的脚本现在也找不到它。我需要找到一种方法来摆脱框架的东西才能正常工作。我现在正在努力。

任何想法的人？

Answer 1

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

$('#left_column').find('textarea[id=CPR_DESCRIPTION]');

Answer 2

ID必须是唯一的，因此只需$("#CPR_DESCRIPTION")即可。

但是，在一般情况下，您应该使用.find()，如下所示：

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

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

$("#someelement .selector") // any level deep
$("#someelement>.selector") // only first-level children

Answer 3

最后，我能够完成这项工作。正如我在EDIT下的问题中解释的那样，主要问题是我的脚本包含在<iframe>元素中。这样可以使用简单的#CPR_DESCRIPTION轻松选择第一个$('#CPR_DESCRIPTION') textarea。剩下的问题是能够进入第二个<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 textarea。

感谢所有帮助过的人：）

jQuery选择器：选择已知元素的子元素

3 个答案: