jquery - 如何在 jQuery 中定位多个元素深处的元素？

Question

如果您有以下html：

<div class="example">
 <div>
   <div>
     <div>
      <span></span>
     </div>
   </div>
  </div>
</div>

您如何定位“.example”中的特定跨度？不用写

$('.example div div div span')

多谢你们。

Answer 1

您不必指定所有的嵌套。在 css 选择器空间中表示任何后代，而不是直接子代。所以应该只是

$('.example span')

另一方面，您可能希望通过指定您想要的来限制搜索结果span。在这种情况下，您可能希望在该跨度上设置 class 或 id 属性并搜索它，使用

$('.example span#spanid') //for id = spanid
$('.example span.spanclass') //for class = spanclass    

有关详细信息，请参阅W3C 选择器文档

Answer 2

$('.example span')应该也能找到。

Answer 3

虽然前面的两个答案都完全有效并回答了这个问题，但我建议如果可能的话，你可以将一个类添加到你想要查找的嵌套元素中。对此没有任何直接的性能改进，只有语义和清晰度。例如，

$('.example span')

现在可能工作，但如果你稍后添加其他跨度，它会中断。但是，如果您将 .my_nested_span 添加到您想要的跨度，然后执行

$('.my_nested_span')

相反，你应该永远做好未来的准备。

Answer 4

你可以给 span 一个 id：

<span id="myspan"></span>

然后很简单：

$('#myspan')