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所述）。

Answer 2

尝试：

jQuery('div#accordianWrapper p a.expandall').click(...)

Answer 3

第一种方式：

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

...定义任何锚点元素的点击，其中“expandall”类在DOM 中的任何位置存在。

第二种方式：

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

...定义具有类“expandall”的任何锚元素的单击，该类是作为具有id="accordionWrapper"的元素的后代的段落元素的后代。请注意，“#accordionWrapper”的元素类型无关紧要，因为您尚未指定它。

我用该id说“元素”而不是带有该id的“元素”，因为如果你的html有效，那么只有一个带有任何给定id的元素。如果你重复了多个元素的id，你会发现（对于大多数浏览器），按id选择只会返回其中一个元素（最常见的是第一个元素）。

假设您的问题是由于重复使用ID，您可以通过为多个相似元素提供相同的类而不是相同的 id 来修复它。

理解jQuery中的DOM层次结构

3 个答案: