在jQuery对象中选择html元素

Question

如果我有：

<div id="foo">
  Hello!
  <div class="bar">
  </bar>
</div>

和

var some = $("#foo");

在 #foo 中选择 .bar div的一种方法是：

$(some.attr('id') + ' .bar') 

但这很脏。是否有一种干净的方法来选择某些中的 .bar div？

Answer 1

您需要使用.find()

  

获取当前匹配元素集中每个元素的后代，由选择器，jQuery对象或元素过滤。

代码的

$("#foo").find('.bar'); // some.find('.bar');

OR

您也可以使用.children()

  

获取匹配元素集中每个元素的子元素，可选择通过选择器进行过滤。

$("#foo").children('.bar'); // some.children('.bar');

注意：.children()方法与.find()的不同之处在于.children()仅沿DOM树向下移动一个级别，而.find()可以遍历多个级别以选择后代元素（孙子等）。

Answer 2

试试这个：

var bar = $('#foo .bar');

这将选择bar元素内#foo类的元素。

文档：https://api.jquery.com/descendant-selector/

或者

var bar = some.find('.bar');

这将在bar内搜索some类#foo的所有元素，即{{1}}。

文档：https://api.jquery.com/find/

Answer 3

这很简单：

var some = $("#foo");

some.find(".bar");