Nth jQuery तत्व कैसे प्राप्त करें

Question

JQuery में, $("...").get(3)3rd DOM तत्व देता है। 3rd jQuery तत्व को वापस करने का क्या कार्य है?

Answer 1

पहले (लघु) चयनकर्ताओं पृष्ठ को ब्राउज़ क्यों नहीं किया जाता है?

यहाँ यह है: :eq()ऑपरेटर। इसका उपयोग ठीक वैसे ही किया जाता है get(), लेकिन यह jQuery ऑब्जेक्ट लौटाता है।

या आप .eq()फंक्शन का भी इस्तेमाल कर सकते हैं ।

Comments

क्या .eq()इसके बजाय होना चाहिए :eq()?

— रुबेनगर्ट

हां, .eq()ओपी के प्रश्न के लिए अधिक उपयुक्त है। :eq()स्ट्रिंग पैरामीटर के भीतर उपयोग किया जाता है $, जबकि .eq()मौजूदा jQuery ऑब्जेक्ट पर एक विधि है।

— mjswensen

मुझे शपथ है कि मुझे हर बार इसे देखना होगा । एकल । समय ।

— ivarni

@JoelWorsham वांछित व्यवहार पर निर्भर करता है। $('select').find('option').eq(n)मूल रूप से समूहीकरण को अनदेखा करेगा, और सभी विकल्पों को समग्र रूप से प्राप्त करेगा। यदि आप इसे प्रति समूह चाहते हैं, तो ऐसा कुछ आवश्यक है:$('select').find('optgroup').each(function() { $(this).find('option').eq(n)...; })

— Dykam

"पहले (संक्षिप्त) चयनकर्ताओं पृष्ठ को ब्राउज़ क्यों नहीं किया जाता है?" - क्योंकि "eq" एक बहुत बुरा नाम है और मैं नियमित रूप से बस इसे छोड़ देता हूं क्योंकि मेरे लिए eq का मतलब तुलना है ....

— mmlac

Answer 2

आप उपयोग कर सकते हैं : उदाहरण के लिए eq चयनकर्ता:

$("td:eq(2)").css("color", "red"); // gets the third td element

या eq (int) फ़ंक्शन:

$("td").eq(2).css("color", "red");

इसके अलावा, याद रखें कि इंडेक्स शून्य-आधारित हैं।

Comments

एक पर्याय के रूप में, आप :nth()चयनकर्ता का उपयोग भी कर सकते हैं - भ्रमित न होने के लिए:nth-child()

— user123444555621

इस तथ्य के 3 साल बाद बेहतर जवाब और संपादित नहीं :)

— एंड्रयू

वास्तव में चयनकर्ता / कार्य का उपयोग करने के तरीके के लिए धन्यवाद

— यूसुफ रोजर्स

Answer 3

यदि आपके पास jQuery ऑब्जेक्ट का उपयोग करने वाले क्वेरी पर नियंत्रण है, तो उपयोग करें :eq()

$("div:eq(2)")

यदि आपके पास इस पर नियंत्रण नहीं है (उदाहरण के लिए, इसे किसी अन्य फ़ंक्शन या कुछ और से पारित किया जा रहा है), तो उपयोग करें .eq()

var $thirdElement = $jqObj.eq(2);

या यदि आप उनमें से एक वर्ग (जैसे, तीसरे, चौथे और पांचवें तत्व) चाहते हैं, का उपयोग करें .slice()

var $third4th5thElements = $jqObj.slice(2, 5);

Comments

टुकड़ा की तलाश में था, लेकिन यह निश्चित नहीं था कि खोज कैसे की जाए। मूल प्रश्न में जो आवश्यक है उससे परे जाने के लिए धन्यवाद।

— समिक आर

जो लोग इस जवाब पर ठोकर खाते हैं, उनके लिए एक उपयोगी बात यह है कि nth-child selector 1 आधारित है, जबकि eq या .eq () 0 आधारित हैं

— सुधांशु मिश्रा

आपको वास्तव में .eq()इसके बजाय उपयोग करना चाहिए :eq()। थोड़ा सा प्रदर्शन बढ़ा।

— क्वर्टी

Answer 4

मुझे लगता है कि आप इसका उपयोग कर सकते हैं

$("ul li:nth-child(2)").append("<span> - 2nd!</span>");

यह प्रत्येक मिलान किए गए ul में दूसरा li ढूंढता है और उसे नोट करता है।

Answer 5

.eq () -n पूर्णांक तत्व की 0-आधारित स्थिति को दर्शाता है।

उदाहरण के लिए:

उस पर एक साधारण सूची वाले पृष्ठ पर विचार करें:

<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>

हम इस विधि को सूची आइटम के सेट पर लागू कर सकते हैं:

$( "li" ).eq( 2 ).css( "background-color", "red" );

अधिक जानकारी के लिए: .eq ()

Answer 6

यदि आपके पास चर में पहले से ही jquery वस्तु है, तो आप इसे केवल एक सामान्य अनुक्रमित सरणी के रूप में भी देख सकते हैं, बिना jquery के उपयोग के:

var all_rows = $("tr");
for(var i=0; i < all_rows.length; i++){
   var row = all_rows[i];
   //additionally, you can use it again in a jquery selector
   $(row).css("background-color","black");
}

हालांकि उपरोक्त उदाहरण किसी भी तरह से उपयोगी नहीं है, यह प्रतिनिधित्व कर रहा है कि आप अनुक्रमित सरणियों के रूप में jquery द्वारा बनाई गई वस्तुओं का इलाज कैसे कर सकते हैं।

Comments

सही, और एक और (उम्मीद है कि उपयोगी) संकेत: यदि पंक्ति में <select>तत्वों की एक सूची है , और आप चयनित कॉम्बोक्स तत्व चाहते हैं, तो उपयोग करें$(row).val();

— मैट

Answer 7

अगर मैं आपके प्रश्न को सही ढंग से समझ पाऊं, तो आप हमेशा की तरह फंक्शन को लपेट सकते हैं:

var $someJqueryEl = $($('.myJqueryEls').get(3));

Comments

यह सिर्फ "कठिन तरीका" है और यह वही है जो eq()आपको मुफ्त में देता है।

— Caumons

Answer 8

यदि आप उदाहरण के लिए विशेष तत्व / नोड या लूप में टैग प्राप्त करना चाहते हैं

<p class="weekday" data-today="monday">Monday</p>
<p class="weekday" data-today="tuesday">Tuesday</p>
<p class="weekday" data-today="wednesday">Wednesday</p>
<p class="weekday" data-today="thursday">Thursday</p>

तो, ऊपर से कोड लूप निष्पादित किया जाता है और हम चाहते हैं कि विशेष क्षेत्र का चयन करें जिसके लिए हमें jQuery चयन का उपयोग करना होगा जो उपरोक्त लूप से केवल अपेक्षित तत्व का चयन कर सकता है, इसलिए कोड होगा

$('.weekdays:eq(n)');

जैसे

$('.weekdays:eq(0)');

साथ ही अन्य विधि से

$('.weekday').find('p').first('.weekdays').next()/last()/prev();

लेकिन पहली विधि अधिक कुशल है जब HTML <tag> अद्वितीय वर्ग नाम है, है।

नोट: दूसरी विधि का उपयोग तब किया जाता है जब लक्ष्य तत्व या नोड में उनका कोई वर्ग नाम नहीं होता है।

ज्यादा फॉलो करने के लिए https://api.jquery.com/eq/

Answer 9

चयनकर्ता का उपयोग करने वाले पुनरावृत्तियों के लिए हालांकि कोई मतलब नहीं लगता है:

var some = $( '...' );

for( i = some.length -1; i>=0; --i )
{
   // Have to transform in a jquery object again:
   //
   var item = $( some[ i ] );

   // use item at will
   // ...
}

Answer 10

JQuery के साथ Nth तत्व को एक्सेस और निकालने के लिए लाइव उदाहरण:

<html>
<head></head>
<body>
    <script type="text/javascript" 
    src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('li:eq(1)').hide();
      });
    </script>
    <ol>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
    </ol>
</body>
</html>

जब यह चलता है, तो आदेशित सूची में दो आइटम हैं जो दिखाते हैं, पहला और तीसरा। दूसरा छिपा हुआ था।

Comments

पुनश्च: गिनती 0 से शुरू होती है; पहला इंडेक्स 0 पर है, दूसरा इंडेक्स 1 पर है और इतने पर ....

— KNU

Answer 11

 $(function(){
            $(document).find('div').siblings().each(function(){
                var obj = $(this);
                obj.find('div').each(function(){
                    var obj1 = $(this);
                    if(!obj1.children().length > 0){
                        alert(obj1.html());
                    }
                });

            });
        });

<div id="2">
    <div>
        <div>
            <div>XYZ Pvt. Ltd.</div>
        </div>
    </div>
</div>
<div id="3">
    <div>
        <div>
            <div>ABC Pvt Ltd.</div>
        </div>
    </div>
</div>

Comments

"$ (फंक्शन () {" फॉल के पहले, मैंने अनाम फ़ंक्शन बनाया है, जो स्वचालित रूप से निकाल दिया जाता है। इसके अंदर, मैंने तीन माता-पिता को भाई-बहनों का उपयोग करते हुए पाया। फिर मैंने सभी 3 पैरेंट डिव में पुनरावृति की और प्रत्येक बच्चों की लंबाई की जांच की। मैं यह कैसे पहचान सकता हूं कि माता-पिता में कोई अंतिम तलाक है या नहीं। अब मैं हर मुख्य माता-पिता के अंतिम तलाक के HTML के बारे में बता रहा हूं।

— संजय वर्मा

आप अपना जवाब संपादित कर सकते हैं , टिप्पणियों में जानकारी देने के बजाय :)

— T3 H40