jquery - 理解 jQuery 中的 DOM 层次结构

Question

我经常遇到一些我不理解的 jQuery 和 DOM ID 和选择器的奇怪事情。通常我只是围绕它们工作，但我真的想一劳永逸地解决这个问题。考虑以下标记:

<div id="accordionWrapper"><p><a class="expandall" href="#">Test</a></p></div>

我在 <a> 上有一个 jQuery 点击函数:

//works fine
jQuery('a.expandall').click(function() {...whatever...});

但以下情况则不然:

//fails
jQuery('#accordionWrapper p a.expandall').click(function() {...whatever...});

...我不明白。这是我对 CSS 或 jQuery 不理解的地方还是......？

Answer 1

其实，你的理解一点都没有错。这是一个 JsBin(JsFiddle 似乎已关闭)，它显示了您的确切标记和确切的 jQuery 代码，全部正常工作。

http://jsbin.com/inuqez/4/edit

因此，如果您在使用提供的第二个 jQuery 选择器时遇到问题，那么一定是其他原因。如果您向我们提供更多详细信息，我们也许可以提供帮助。否则，只需仔细查看您的代码并确保没有任何明显的错误，例如具有相同 ID 的多个元素(如 @Frederic 提到的)。