jQuery 遍历 - find() 方法

jQuery परिभ्रमण संदर्भ ग्रंथ

实例

搜索所有段落中的后代 span 元素，并将其颜色设置为红色：

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

आप खुद साफ़ी देखें

定义和用法

find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。

语法

.find(selector)
参数 描述
selector 字符串值，包含供匹配当前元素集合的选择器表达式。

详细说明

如果给定一个表示 DOM 元素集合的 jQuery 对象，.find() 方法允许我们在 DOM 树中搜索这些元素的后代，并用匹配元素来构造一个新的 jQuery 对象。.find() 与 .children() 方法类似，不同的是后者仅沿着 DOM 树向下遍历单一层级。

.find() विधा का पहला स्पष्ट लक्षण यह है कि यह चयनक एक्सप्रेशन अपना चयनक एक्सप्रेशन के समान है। यह एक्सप्रेशन के साथ मेल खाने वाले एलिमेंटों को फ़िल्टर करने के लिए परीक्षण करेगा।

यहाँ कम्पलेक्स निम्नलिखित सामग्री विचार करें:

<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() के लिए आवश्यक पारामीटर है। यदि हम सभी वंशज तत्वों को लेना चाहते हैं, तो विस्तृत चयनकर्ता '*' पास किया जा सकता है。

चयनकर्ता कंटेक्स्ट .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 परिभ्रमण संदर्भ ग्रंथ