jQuery 选择器问题（Div 中的所有子项）答案

【问题标题】：jQuery Selector Problem (All Children inside Div)jQuery 选择器问题（Div 中的所有子项）
【发布时间】：2010-11-30 12:23:22
【问题描述】：

我正在尝试附加一个单击函数，该函数将 CSS 类添加到特定 div 内的 all 锚标记。不知何故，我无法让 jQuery 执行此操作（也没有 JS 错误）。

div：

<div id="better">
    <a href="1.aspx">One</a>
    <a href="2.aspx">Two</a>
    <a href="3.aspx">Three</a>
</div>

我的 jQuery 代码（在 $(document).ready 内部）：

 $("#better > a").click(function() { $(this).addClass('active'); });

我在 click 函数中添加了一个警报以查看它是否触发，但没有任何反应。正如我在上面所写的，我也没有在 FF 错误控制台中收到 JavaScript 错误。

帮助？

编辑：这只是示例代码。是的，重定向时更改类没有意义。我刚刚将我的代码简化为我正在尝试做的事情的核心。 :)

【问题讨论】：

标签： jquery jquery-selectors

【解决方案1】：

$("#better a").bind('click', function() { $(this).addClass('active'); });

【讨论】：

对我来说没有意义。如果上述方法不起作用。现在只有更改被选择 ANCHORS 是不是直接后代，而是任何后代。如果您查看 jQuery 源代码，.click 只是 bind('click', func) 的简写。
这可能会通过将点击事件附加到不需要的锚标记而导致无法预料的问题。在不知道其余标记的情况下，确保“更好”内没有其他不需要附加点击事件的锚标记
这行得通——我的原始代码没有。不知道为什么或有什么区别。
@T B：我在目标 div 中只有我想要影响的锚标记。不过，感谢您指出危险。
@Alex：我认为区别在于父子选择器">"......这只是我注意到的，因为我无法让它为我正常工作，所以我总是只需诉诸“.find()”或仅使用空格。

【解决方案2】：

如果我明白你在问什么......你想结束这个吗？

<div id="better">
    <a href="1.aspx" class="active">One</a>
    <a href="2.aspx" class="active">Two</a>
    <a href="3.aspx" class="active">Three</a>
</div>

如果该 div 中的任何链接被点击，对吧？（你确实说过所有锚标签）......然后使用这个：

$("#better").click(function() {
 $(this).find('a').addClass('active');
 return false;
});

【讨论】：

【解决方案3】：

警报对我有用。但是，如果您要重定向到新页面，为什么要添加一个类？

【讨论】：

重定向后的类将无关紧要。如果您不想点击链接，请尝试：return false;

【解决方案4】：

两种猜测：

您的页面上是否还有其他元素为id="better"？ ID 应该是全局唯一的，所以选择器只会返回其中一个。
尝试让您的点击函数返回 false，以阻止用户点击链接。（当用户离开页面时添加一个类似乎很奇怪，除非链接在新窗口中打开。）

【讨论】：

【解决方案5】：

尝试在页面底部的结束正文标记之前或在 $(document).ready() 函数中运行代码。

使用 Firebug，您可以使用 console.log() 写出到 javascript 控制台，以确保选择器实际返回元素。例如：console.log($("#better > a").length)

【讨论】：