如何选择具有某个 id 的父级的图像元素？答案

【问题标题】：How do I select an image element that has a parent of a certain id?如何选择具有某个 id 的父级的图像元素？
【发布时间】：2012-08-31 15:22:13
【问题描述】：

<div id="someId_123">
     <img class"testClass"/>
</div>

使用 JQuery，我想根据其类以及 div 的 id 中包含“123”这一事实来选择此图像。

【问题讨论】：

【解决方案1】：

$("div[id*='123'] img.testClass")

【讨论】：

【解决方案2】：

我认为这样可以：

$("div[id*=123] img.testClass")

【讨论】：

【解决方案3】：

您应该可以使用'[id*="123"] > .testClass'。 > 指定父子关系。

【讨论】：

【解决方案4】：

$(":div[id*=123] img.testClass");

您的 HTML 代码中也有错字：

<img class"testClass"/>

应该是：

<img class="testClass"/>

我花了几分钟试图找出 jsFiddle 不工作的原因。只是因为你没有在类名前加上= 符号。

【讨论】：

【解决方案5】：

这个怎么样：

$('img.testClass', '[id*="123"]')

【讨论】：

【解决方案6】：

首先抓取指定类的所有图像（比选择所有节点更有效），然后过滤其父级具有符合特定条件的 id 的图像。

$('.testClass').filter(function(){ return this.parent().attr('id').match(/123/) })

【讨论】：

你不觉得只使用CSS选择器来选择而不是使用jQuery函数会更快吗？
@Cupidvogel 它取决于 HTML - 但关键因素是选择一个较小的集合，然后过滤它 - 而不是选择所有元素（正如大多数人建议的那样）甚至所有 div 的（如你是）。如果您使用 css 选择器，jQuery 将拆分字符串并在其上运行函数 - 所以我看不出有太大区别。此外，值得注意的是，CSS3 选择器虽然最初具有速度优势，但与 jQuery 选择器相比不再具有优势。
如果选择器表达式只包含一个原始的 CSS 选择器，jQuery 将通过 CSS queryselector 方法将其通过管道传输，该方法是本机方法，运行速度更快。直到几天前我自己才知道，当时我很难学会（很多不投票，就像你已经收到的一样！）
猜测原生意味着更快是错误的假设——因为最近对 jQuery 选择器引擎的性能增强实际上往往优于浏览器实现。在此处运行测试：jsperf.com/jquery-selector-benchmark/3，您会发现$('#parent').find('.child') 比$('#parent > .child') 快得多。
如果有的话，我对正则表达式的使用可能会减慢查询速度。我坚持我的答案——我认为它是通用的，允许进行许多测试，并且坚持选择小集以提高效率的原则。

【解决方案7】：

这将在 ID 中的任意位置搜索 123，并使用类 testClass 抓取图像。

$('[id*="123"] img.testClass')

如果您希望它是动态的，只需执行以下操作：

$('[id*="' + idNumber + '"] img.' + className)

【讨论】：