Przegląd jQuery - metoda find()

Podręcznik do przechodzenia jQuery

Przykład

Szukaj wszystkich potomków elementów span w sekcji p i ustaw ich kolor na czerwony:

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

Spróbuj sam

Definicja i użycie

Metoda find() uzyskuje potomków każdego elementu w bieżącej kolekcji elementów, filtrując za pomocą selektora, obiektu jQuery lub elementu.

Gramatyka

.find(selector)
Parametry Opis
selector Wartość ciągła, zawierająca wyrażenie selekcyjne dostarczane do dopasowania bieżącej kolekcji elementów.

Szczegółowe wyjaśnienie

Jeśli mamy obiekt jQuery reprezentujący zestaw elementów DOM, metoda .find() pozwala nam przeszukać te elementy potomków w drzewie DOM i utworzyć nowy obiekt jQuery z dopasowującymi elementami. Metoda .find() jest podobna do metody .children(), różni się tylko tym, że ta ostatnia przechodzi tylko przez jedno poziome w drzewie DOM.

Pierwszą oczywistą cechą metody .find() jest to, że akceptuje wyrażenie selekcyjne tego samego typu, co przekazujemy do funkcji $(). Prześlą testowanie, czy elementy odpowiadają temu wyrażeniu, aby filtrować elementy.

Proszę pomyśleć o następującej prostej wewnętrznej liście:

<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>

Zacznemy od wyszukiwania elementów listy II:

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

Spróbuj sam

Wynik tego badania to, że projekty A, B, 1, 2, 3 oraz C zostały ustawione na czerwone tło. Nawet jeśli projekt II pasuje do wyrażenia wyboru, nie zostanie on zawarty w wyniku; będzie to tylko dopasowanie potomków.

W przeciwieństwie do innych metod przechodzenia drzewa, wyrażenie wyboru jest obowiązkowym parametrem dla .find(). Jeśli chcemy uzyskać wszystkie potomki, można przekazać symbol wildcard '*'.

Kontekst wyboru jest realizowany przez metodę .find(); więc $('li.item-ii').find('li') jest równoważne z $('li', 'li.item-ii').

Dla jQuery 1.6 możemy również używać określonych zestawów jQuery lub elementów do filtrowania. Nadal w powyższej wewnętrznej liście, najpierw napisałbyśmy:

var $allListElements = $('li');

Następnie przekazujemy ten obiekt jQuery metodzie find:

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

Spróbuj sam

Powyższy kod zwróci jQuery zestaw, który zawiera elementy listy II jako potomków.

Podobnie, można również przekazać element:

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

Spróbuj sam

Wynik tego wywołania to projekt 1 ustawiony na czerwony tło.

Podręcznik do przechodzenia jQuery