JQuery 选择器中的嵌套 ID答案

【问题标题】：Nested ID in JQuery selectorJQuery 选择器中的嵌套 ID
【发布时间】：2011-07-12 13:50:14
【问题描述】：

我正在尝试更改嵌套在名为 blink3 的 div 中的 a 的 href：

$('#blink3 #backLink').attr('href',"#item5");

其中html代码如下：

<div style="float:left;text-align:center;" id="blink3">
<a href="#item4" class="panel" id="backLink">
<div class="divBack"></div></a>
</div>

适用于所有浏览器 - 不是 IE 7，我不知道为什么，不会更改 href。

这是 IE 7 的错误吗？查询？我的代码有什么问题吗？

有什么解决办法吗？

【问题讨论】：

你的代码中有多少个id="backLink"？
ID 应该对一个页面是唯一的，如果您有许多相同的内联 ID，那么我想这是您问题的根本原因。另一方面，类意味着分配给许多不同的 DOM 元素。
你很快......我知道我不应该有多个......但我需要它来做一些其他的事情。这会导致问题吗，并且仅在 IE 7 中？
好的。所以我需要你们专家告诉我：我可以写 $(this).attr('class')=="backlink" 吗？与 $(this).attr('id') 相反？
@NinaNa：可能是的。重复的ids 确实会在 IE7 中导致问题，而在较新的浏览器中通常不会导致问题。

【解决方案1】：

Nick Craver（天哪，你去过哪里？）已经在评论中说明了这一点。创建像 #id #id 这样的选择器完全没有意义，因为根据定义，ID 在您的 DOM 中必须是唯一的。

您似乎违反了该规则，因此 jQuery 可能选择了错误的节点。

您应该将“反向链接”id 替换为 classes，然后选择类似的选择器

$('#blink3 .backLink');

【讨论】：

出于好奇。如果 NinaNa 在 id="blink3" 中有多个 <a/>s 并且他/她想访问其中的多个怎么办？如果$('blink3')先保存在变量blink3中，那blink3.find('#backLink')不会比$('#backLink')快吗？

【解决方案2】：

我在问题中没有看到任何重复的 ID，即使我的所有 ID 都是唯一的，我也有同样的问题。想要进行嵌套 ID 选择器的一个完全正当的理由是当且仅当它是特定父级的子级时才检索元素。我通过拖放 UI 和树节点遇到了这个问题。虽然不是选择器，但这是我过去使用的：

$("#parentId").find("#childId")

【讨论】：

【解决方案3】：

ID 在一个页面中应该是唯一的。正如 Nick 暗示的那样，您应该只有一个 ID 值为backlink。所以$('#backlink') 的选择器本身就足够了。如果您有多个 ID 的值为 backlink，那么您的 HTML 是错误的，您应该改正它。

【讨论】：

【解决方案4】：

使用id搜索嵌套元素就像连接id选择器一样简单，例如：

$('#selector_modal #modal-title')

在这种情况下，我们正在搜索一个 id 为 selector_modal 的模态框，其中包含一个 h4 元素，在这种情况下，该元素的 id 为 modal-title。

很简单。

【讨论】：