jQuery-besøg - find() metode

jQuery 遍历参考手册

Eksempel

Søg efter alle efterkommere af span-elementer i alle paragrafer og sæt deres farve til rød:

$("p").find("span").css('color','red');

亲自试一试

Definition og brug

find() metoden får hver element i den aktuelle elementkolektion til at finde deres efterkommere, ved hjælp af en vælger, en jQuery-objekt eller et element til at filtrere.

Syntaks

.find(selector)
Parameter Beskrivelse
selector Strengværdi, der indeholder vælgerudtrykket, der bruges til at matche den aktuelle elementkolektion.

Detaljeret forklaring

Hvis vi har en jQuery-objekt, der repræsenterer en DOM-elementkolektion, tillader .find() metoden os at søge efter disse elementers efterkommere i DOM-træet og opbygge en ny jQuery-objekt med de matchende elementer. .find() er lignende til .children() metoden, men den sidste bevæger sig kun ned ad DOM-træet et enkelt niveau.

.find() metoden har en tydelig karakteristik, nemlig at den accepterer en vælgerudtryksform, der er samme type som den, vi sender til $() funktionen. Ved at teste, om elementerne matcher dette udtryk, filtreres elementerne.

Tænk over følgende enkle indlejrede liste:

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

我们将从列表 II 开始来查找其中的列表项：

$('li.item-ii').find('li').css('background-color', 'red');

亲自试一试

这次调研的结果是，项目 A、B、1、2、3 以及 C 均被设置为红色背景。即使项目 II 匹配选择器表达式，它也不会被包含在结果中；只会对后代进行匹配。

与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 '*'。

选择器 context 是由 .find() 方法实现的；因此，$('li.item-ii').find('li') 等价于 $('li', 'li.item-ii')。

对于 jQuery 1.6，我们还可以使用给定的 jQuery 集合或元素来进行筛选。还是上面的嵌套列表，我们首先这样写：

var $allListElements = $('li');

然后将这个 jQuery 对象传递给 find 方法：

$('li.item-ii').find( $allListElements );

亲自试一试

上面的代码会返回一个 jQuery 集合，其中包含属于列表 II 后代的列表元素。

类似地，也可以传递一个元素：

var item1 = $('li.item-1')[0];
$('li.item-ii').find( item1 ).css('background-color', 'red');

亲自试一试

这次调用的结果是项目 1 被设置为红色背景。

jQuery 遍历参考手册