jQuery
डोम ट्रैवर्सिंग

तत्व के बच्चों का चयन करें

एक तत्व के बच्चों का चयन करने के लिए आप children() विधि का उपयोग कर सकते हैं।

<div class="parent">
    <h2>A headline</h2>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Praesent quis dolor turpis...</p>
</div>

.parent तत्व के सभी बच्चों का रंग बदलें:

$('.parent').children().css("color", "green");

विधि एक वैकल्पिक selector तर्क को स्वीकार करती है जिसका उपयोग उन तत्वों को फ़िल्टर करने के लिए किया जा सकता है जो वापस आ गए हैं।

// Only get "p" children
$('.parent').children("p").css("color", "green");

JQuery तत्वों की सूची में परिवर्तन

जब आपको jQuery तत्वों की सूची पर पुनरावृति करने की आवश्यकता हो।

इस DOM संरचना पर विचार करें:

<div class="container">
    <div class="red one">RED 1 Info</div>
    <div class="red two">RED 2 Info</div>
    <div class="red three">RED 3 Info</div>
</div>

red वर्ग के साथ सभी div तत्वों में मौजूद टेक्स्ट को प्रिंट करने के लिए:

$(".red").each(function(key, ele){
    var text = $(ele).text();
    console.log(text);
});

युक्ति: key div.red तत्व की अनुक्रमणिका है जिसे हम वर्तमान में इसके अभिभावक के भीतर div.red कर रहे हैं। ele HTML तत्व है, इसलिए हम $() या jQuery() का उपयोग करके उससे एक jQuery ऑब्जेक्ट बना सकते हैं, जैसे: $(ele) । इसके बाद, हम ऑब्जेक्ट पर किसी भी jQuery विधि को कॉल कर सकते हैं, जैसे css() या hide() आदि। इस उदाहरण में, हम सिर्फ ऑब्जेक्ट के टेक्स्ट को खींचते हैं।

भाई-बहनों का चयन करना

किसी आइटम के भाई-बहनों का चयन करने के लिए आप .siblings() विधि का उपयोग कर सकते हैं।

एक विशिष्ट उदाहरण जहां आप किसी आइटम के भाई-बहनों को संशोधित करना चाहते हैं:

<ul class="menu">
    <li class="selected">Home</li>
    <li>Blog</li>
    <li>About</li>
</ul>

जब उपयोगकर्ता किसी मेनू आइटम पर क्लिक करता है तो selected वर्ग को क्लिक किए गए तत्व में जोड़ा जाना चाहिए और उसके भाई-बहनों से हटा दिया जाना चाहिए:

$(".menu").on("click", "li", function () {
    $(this).addClass("selected");
    $(this).siblings().removeClass("selected");
});

विधि एक वैकल्पिक selector तर्क लेती है, जिसका उपयोग यदि आप उन भाई-बहनों के प्रकार को संकीर्ण करने के लिए कर सकते हैं जिन्हें आप चुनना चाहते हैं:

$(this).siblings("li").removeClass("selected");

निकटतम () विधि

पहले तत्व को लौटाता है जो तत्व पर शुरू होने वाले चयनकर्ता से मेल खाता है और DOM ट्री को ट्रेस करता है।

एचटीएमएल

<div id="abc" class="row">
    <div id="xyz" class="row">
    </div>
    <p id="origin">
      Hello
    </p>
</div>

jQuery

var target = $('#origin').closest('.row');
console.log("Closest row:", target.attr('id') );

var target2 = $('#origin').closest('p');
console.log("Closest p:", target2.attr('id') );

आउटपुट

"Closest row: abc"
"Closest p: origin"

पहला () विधि: पहला तरीका तत्वों के मिलान सेट से पहला तत्व लौटाता है।

एचटीएमएल

<div class='.firstExample'>
   <p>This is first paragraph in a div.</p>
   <p>This is second paragraph in a div.</p>
   <p>This is third paragraph in a div.</p>
   <p>This is fourth paragraph in a div.</p>
   <p>This is fifth paragraph in a div.</p>
</div>

JQuery

var firstParagraph = $("div p").first();
console.log("First paragraph:", firstParagraph.text());

आउटपुट:

First paragraph: This is first paragraph in a div.

अगला तत्व प्राप्त करें

अगला तत्व प्राप्त करने के लिए आप .next() विधि का उपयोग कर सकते हैं।

<ul>
    <li>Mark</li>
    <li class="anna">Anna</li>
    <li>Paul</li>
</ul>

यदि आप "अन्ना" तत्व पर खड़े हैं और आप अगला तत्व "पॉल" प्राप्त करना चाहते हैं, तो .next() विधि आपको ऐसा करने की अनुमति देगी।

// "Paul" now has green text
$(".anna").next().css("color", "green");

विधि एक वैकल्पिक selector तर्क लेती है, जिसका उपयोग किया जा सकता है यदि अगले तत्व एक निश्चित प्रकार का तत्व होना चाहिए।

// Next element is a "li", "Paul" now has green text
$(".anna").next("li").css("color", "green");

यदि अगला तत्व प्रकार selector का नहीं है, तो एक खाली सेट वापस आ जाता है, और संशोधन कुछ भी नहीं करेंगे।

// Next element is not a ".mark", nothing will be done in this case
$(".anna").next(".mark").css("color", "green");

पिछला तत्व प्राप्त करें

पिछले तत्व को प्राप्त करने के लिए आप .prev() विधि का उपयोग कर सकते हैं।

<ul>
    <li>Mark</li>
    <li class="anna">Anna</li>
    <li>Paul</li>
</ul>

यदि आप "अन्ना" तत्व पर खड़े हैं और आप पिछले तत्व, "मार्क" को प्राप्त करना चाहते हैं, तो .prev() विधि आपको ऐसा करने की अनुमति देगी।

// "Mark" now has green text
$(".anna").prev().css("color", "green");

विधि एक वैकल्पिक selector तर्क लेती है, जिसका उपयोग किया जा सकता है यदि पिछले तत्व को एक निश्चित प्रकार का तत्व होना चाहिए।

// Previous element is a "li", "Mark" now has green text
$(".anna").prev("li").css("color", "green");

यदि पिछला तत्व प्रकार selector का नहीं है, तो एक खाली सेट वापस आ जाता है, और संशोधन कुछ भी नहीं करेंगे।

// Previous element is not a ".paul", nothing will be done in this case
$(".anna").prev(".paul").css("color", "green");

एक चयन फ़िल्टर करें

किसी चयन को फ़िल्टर करने के लिए आप .filter() विधि का उपयोग कर सकते हैं।

विधि को एक चयन पर बुलाया जाता है और एक नया चयन लौटाता है। यदि फ़िल्टर एक तत्व से मेल खाता है, तो इसे चयनित चयन में जोड़ा जाता है, अन्यथा इसे अनदेखा किया जाता है। यदि किसी तत्व का मिलान नहीं किया जाता है तो एक खाली चयन वापस कर दिया जाता है।

HTML

यह वह HTML है जिसका हम उपयोग करेंगे।

<ul>
    <li class="zero">Zero</li>
    <li class="one">One</li>
    <li class="two">Two</li>
    <li class="three">Three</li>
</ul>

चयनकर्ता

चयनकर्ताओं को फ़िल्टर करना चयन को फ़िल्टर करने के सरल तरीकों में से एक है।

$("li").filter(":even").css("color", "green"); // Color even elements green
$("li").filter(".one").css("font-weight", "bold"); // Make ".one" bold

समारोह

किसी फ़ंक्शन का उपयोग करके चयन को फ़िल्टर करना उपयोगी है यदि चयनकर्ताओं का उपयोग करना संभव नहीं है।

फ़ंक्शन को चयन में प्रत्येक तत्व के लिए कहा जाता है। यदि यह एक true मूल्य देता है, तो तत्व को चयनित चयन में जोड़ा जाएगा।

var selection = $("li").filter(function (index, element) {
    // "index" is the position of the element
    // "element" is the same as "this"
    return $(this).hasClass("two");
});
selection.css("color", "green"); // ".two" will be colored green

तत्वों

आप DOM तत्वों द्वारा फ़िल्टर कर सकते हैं। यदि DOM तत्व चयन में हैं तो उन्हें लौटाए गए चयन में शामिल किया जाएगा।

var three = document.getElementsByClassName("three");
$("li").filter(three).css("color", "green");

चयन

आप एक चयन को दूसरे चयन द्वारा फ़िल्टर भी कर सकते हैं। यदि कोई तत्व दोनों चयनों में है तो उसे लौटाए गए चयन में शामिल किया जाएगा।

var elems = $(".one, .three");
$("li").filter(elems).css("color", "green");

खोज () विधि

.find () विधि हमें DOM ट्री में इन तत्वों के वंशजों के माध्यम से खोजने और मिलान तत्वों से एक नया jQuery ऑब्जेक्ट बनाने की अनुमति देती है।

एचटीएमएल

     <div class="parent">
        <div class="children" name="first">
            <ul>
                <li>A1</li>
                <li>A2</li>
                <li>A3</li>
            </ul>
        </div>
        <div class="children" name="second">
            <ul>
                <li>B1</li>
                <li>B2</li>
                <li>B3</li>
            </ul>
        </div>
       </div>

jQuery

 $('.parent').find('.children[name="second"] ul li').css('font-weight','bold');

उत्पादन

• ए 1
• ए 2
• ए 3

• बी 1
• बी 2
• बी 3