jQuery na paglalakbay - .find() na pamamaraan
Sample
Hanapin ang lahat ng anumang span na elemento sa lahat ng pahina at gawing red ang kanilang kulay:
$("p").find("span").css('color','red');
Paglilinang at paggamit
Ang .find() na pamamaraan ay kumukuha ng mga anak ng bawat elemento sa kasalukuyang koleksyon ng elemento, sa pamamagitan ng selector, jQuery na elemento o elemento para suriin.
Mga kasabihan
.find(selector)
| Parametro | Paglalarawan |
|---|---|
| selector | String na halaga, na naglalaman ng expression ng selector na ginagamit upang magkakita ng kasalukuyang koleksyon ng elemento. |
Detalyadong paglalarawan
Kung binigay ang isang jQuery na naglalarawan ng isang koleksyon ng DOM na elemento, ang .find() na pamamaraan ay nagbibigay ng kapangyarihan sa amin na maghahanap ng mga anak ng mga elemento sa DOM tree at gumawa ng bagong jQuery na elemento na gumagamit ng tumugmang elemento. Ang .find() ay katulad ng .children() na pamamaraan, ngunit ang kahalintulad na pamamaraan ay naglalakbay lamang sa isang sola na antas ng DOM tree.
Ang unang malinaw na katangian ng .find() na pamamaraan ay, tinatanggap nito ang expression ng selector na katulad ng uri ng expression na pinapasa sa function ng $(). Ginagamit ang pagsubok kung ang mga elemento ay tumutugma sa expression na ito upang suriin ang mga elemento at ipasahan.
Pangisipin ang napakasimpleng nakahulugang listahan na ito:
<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>
Magmumula tayo mula sa listahan II upang hanapin ang mga item ng listahan:
$('li.item-ii').find('li').css('background-color', 'red');
Ang resulta ng kasalukuyang pagtatanong ay, ang proyekto A, B, 1, 2, 3 at C ay na-set sa kulay puti ng background. Kahit na ang proyekto II ay sumama sa expression ng selector, hindi ito tatanggapin; tanging ang mga anak lamang.
Hindi katulad ng ibang mga method ng pag-ugnay sa puno, ang expression ng selector ay kinakailangan para sa .find(). Kung kailangan naming maipasok ang lahat ng mga anak, maaring ipasa ang wildcard selector '*'.
Ang selector context ay ginagawa ng method na .find(); kaya ang $('li.item-ii').find('li') ay katumbas ng $('li', 'li.item-ii').
Para sa jQuery 1.6, maaari rin naming gamitin ang ibinigay na jQuery collection o elemento para sa pagsusuri. Paalam sa nakakapalit na listahan, una naming isulat:
var $allListElements = $('li');
Pagkatapos, ilipat ang ganitong jQuery object sa method na find:
$('li.item-ii').find( $allListElements );
Ang kodong ito ay magbibigay ng isang jQuery collection na naglalaman ng mga elemento ng listahan II na mga anak.
Pareho rin, maaring ipasa din ang isang elemento:
var item1 = $('li.item-1')[0];
$('li.item-ii').find( item1 ).css('background-color', 'red');
Ang resulta ng kasalukuyang pagtawag ay ang proyekto 1 ay na-set sa kulay puti ng background.
