你如何在jQuery的多个元素内部深入定位元素？

Question

如果你有以下html：

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

如何定位“.example”中的特定范围？无需写

$('.example div div div span')

谢谢你们。

Answer 1

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

Answer 2

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

$('.example span')

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

进行搜索

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

有关详细信息，请参阅W3C selectors文档

Answer 3

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

$('.example span')

现在可能有用，但是如果你稍后添加其他跨度，它就会中断。但是，如果将.my_nested_span添加到所需的范围，然后执行

$('.my_nested_span')

相反，你将来应该总是很好。

Answer 4

您可以为范围指定一个ID：

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

然后就是这样：

$('#myspan')