JQuery选择器 - 为什么添加过滤器会返回更多元素？

Question

我知道有很多关于JQuery选择器的问题，但我没有看到我的特殊问题。

如果我使用这个选择器，它会找到2个元素，两个类都是“dluSingle”。一个的ID为“F45_rdefault_F48”，其中一个的ID为“F45_r0_F48”。

linkGridDiv.find('.dluSingle')

所以，我认为这段代码只返回id为“F45_r0_F48”的元素。

linkGridDiv.find('.dluSingle [id *= "r0"]')

相反，它返回5个元素，所有元素在id中都包含“r0”，但它们都没有类型“dluSingle”。

如果它什么也没找到，那对我来说会更有意义。为什么添加额外的过滤器会返回更多结果而不是更少？我不明白的是什么？谢谢你的帮助！

Answer 1

通过在类和“过滤器”之间加一个空格，jQuery将过滤器视为后代选择器。

换句话说，它会查找低于你的dluSingle类的任何子元素，孙子元素等元素。要在ID中查找“dluSingle”和“r0”类的元素，您可以执行以下操作：

linkGridDiv.find('.dluSingle[id *= "r0"]')

为了完整，

linkGridDiv.find('.dluSingle [id *= "r0"]')

查找id为“r0”的任何元素，该元素是具有类“.dluSingle”的元素的后代，并且

linkGridDiv.find('.dluSingle > [id *= "r0"]')

在ID中查找带有“r0”的任何元素，该元素是具有类“.dluSingle”的元素的子。

Answer 2

尝试一下，在课程选择和属性选择之间没有空格。

linkGridDiv.find('.dluSingle[id *= "r0"]')