Jquery में केवल प्रथम-स्तरीय तत्वों का चयन करना

Question

मैं <ul>इस तरह की सूची से केवल माता-पिता के लिंक तत्वों का चयन कैसे कर सकता हूं ?

<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a>
  <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>

इसलिए सी.एस.एस. ul li a , लेकिन नहींul li ul li a

धन्यवाद

Answer 1

$("ul > li a")

यदि आपको विशेष रूप से सबसे बाहरी उल को लक्षित करना है, तो आपको रूट उल पर एक वर्ग निर्धारित करने की आवश्यकता होगी:

<ul class="rootlist">
...

फिर यह है:

$("ul.rootlist > li a")....

यह सुनिश्चित करने का एक और तरीका है कि आपके पास केवल रूट ली तत्व हैं:

$("ul > li a").not("ul li ul a")

यह टेढ़ा लग रहा है, लेकिन यह चाल करना चाहिए

Comments

हम्म मुझे पता चला कि मेरी समस्या 1.2 jquery का उपयोग करने के साथ थी। मैंने इसे 1.3 के साथ बदल दिया है और इस तरह के चयनकर्ता अब ठीक काम कर रहे हैं। आपके उत्तर के लिए बहुत बहुत धन्यवाद और जिसने भी उत्तर दिया।

— एस्टन

यदि आप एक वर्ग जोड़ना नहीं चाहते हैं तो बस $ ("उल: पहला> ली" एक) जाहिर है कि यह केवल प्रथम स्तर के लिए काम करेगा, न कि आंतरिक स्तरों के लिए।

— अल्फोंसो

आपकी टिप के लिए धन्यवाद। मैंने इसे भी परीक्षण किया है, और ऐसा लगता है कि यह अच्छी तरह से काम करता है: ul.find(">li");यदि आपके पास उल संस्करण में JQuery ऑब्जेक्ट के रूप में "उल" नोड है।

— जॉन बो

Answer 2

एक बार जब आपके पास प्रारंभिक उल होता है, तो आप बच्चों () पद्धति का उपयोग कर सकते हैं , जो केवल तत्व के तत्काल बच्चों पर विचार करेगा। जैसा कि @activa बताता है, रूट तत्व को आसानी से चुनने का एक तरीका यह है कि इसे एक कक्षा या एक आईडी दिया जाए। निम्नलिखित मानता है कि आपके पास आईडी के साथ एक रूट उल है root।

$('ul#root').children('li');

Comments

धन्यवाद, यह मेरे लिए बहुत उपयोगी है। एक $('ul').first().children('li')भी इस्तेमाल किया जा सकता है

— इवान ब्लैक

यह मेरे लिए पसंदीदा उत्तर है, क्योंकि मेरे पास पहले से ही तत्व है और इसलिए .find के बजाय .children का उपयोग करेंगे।

— हर्बर्ट वान-व्लिएट

Answer 3

जैसा कि अन्य उत्तरों में कहा गया है, सरलतम विधि मूल तत्व (आईडी या वर्ग नाम से) को विशिष्ट रूप से पहचानना और प्रत्यक्ष वंशज चयनकर्ता का उपयोग करना है।

$('ul.topMenu > li > a')

हालाँकि, मैं इस सवाल के समाधान की तलाश में आया था जो DOM के अलग-अलग गहराई पर अनाम तत्वों पर काम करेगा ।

यह प्रत्येक तत्व की जांच करके प्राप्त किया जा सकता है, और यह सुनिश्चित करना कि मिलान तत्वों की सूची में माता-पिता नहीं है। यहाँ मेरा समाधान है , एक jQuery चयनकर्ता 'सबसे ऊपर' में लिपटे।

jQuery.extend(jQuery.expr[':'], {
  topmost: function (e, index, match, array) {
    for (var i = 0; i < array.length; i++) {
      if (array[i] !== false && $(e).parents().index(array[i]) >= 0) {
        return false;
      }
    }
    return true;
  }
});

इसका उपयोग, मूल पोस्ट का समाधान है:

$('ul:topmost > li > a')

// Or, more simply:
$('li:topmost > a')

पूरा jsFiddle यहां उपलब्ध है ।

Comments

नए डोम तरीकों का उपयोग करके आप नाटकीय रूप से प्रदर्शन में सुधार कर सकते हैं :topmost- उपयोग करने का प्रयास करें .parentElement.closest(selector)। हमेशा की तरह, आईई + एज केवल लोगों को इसका समर्थन नहीं कर रहे हैं> :-( तो यहाँ है एक polyfill pastebin.com/JNBk77Vm

— oriadam

Answer 4

बस आप इस का उपयोग कर सकते हैं ..

$("ul li a").click(function() {
  $(this).parent().find(">ul")...Something;
}

उदाहरण देखें: https://codepen.io/gmkhussain/pen/XzjgRE

Answer 5

यदि बच्चे अभी भी बच्चों के लिए आवेदन करेंगे, तो कई मामलों में परिणाम अभी भी बच्चों के लिए लागू होंगे, तो आप यह कोशिश करना चाह सकते हैं।

$("ul.rootlist > li > a")

इस विधि का उपयोग करना: E> F किसी भी F तत्व से मेल खाता है जो एक तत्व E का बच्चा है।

केवल स्पष्ट बच्चों को देखने के लिए JQuery को बताता है। http://www.w3.org/TR/CSS2/selector.html

Answer 6

आप $("ul li:first-child")केवल उल के प्रत्यक्ष बच्चों को प्राप्त करने के लिए भी उपयोग कर सकते हैं ।

मैं सहमत हूँ, हालांकि, आपको मुख्य उल की पहचान करने के लिए एक आईडी या कुछ और की आवश्यकता है अन्यथा यह सिर्फ उन सभी का चयन करेगा। यदि आपके पास यूएल के आसपास एक आईडी के साथ एक तलाक था, तो सबसे आसान काम होगा$("#someDiv > ul > li")

Comments

यह गलत उपयोग है :first-child। यह चयन करेंगे "पहले liहर की ul"। मूल पोस्ट " liपहले से हर" के लिए पूछ रहा था ul।

— कोर्टनी क्रिस्टेंसेन

Answer 7

इसे इस्तेमाल करे:

$("#myId > UL > LI")

Answer 8

मुझे किसी भी गहराई से नेस्टेड वर्गों के साथ कुछ परेशानी थी इसलिए मुझे यह पता चला। यह केवल पहले स्तर का चयन करेगा जिसमें उसका सामना जेक्वेरी ऑब्जेक्ट से होगा:

var $elementsAll = $("#container").find(".fooClass");4

var $levelOneElements = $elementsAll.not($elementsAll.children().find($elementsAll));

$levelOneElements.css({"color":"red"})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="fooClass" style="color:black">
Container
  <div id="container">
    <div class="fooClass" style="color:black">
      Level One
      <div>
        <div class="fooClass" style="color:black">
             Level Two
        </div>
      </div>
    </div>
    <div class="fooClass" style="color:black">
      Level One
      <div>
        <div class="fooClass" style="color:black">
             Level Two
        </div>
      </div>
    </div>
  </div>
</div>

Answer 9

1

 $("ul.rootlist > target-element")
2   $("ul.rootlist").find(target-element).eq(0) (only one instance)
3   $("ul.rootlist").children(target-element)

वहाँ शायद कई अन्य तरीके हैं

Answer 10

.add_to_cart >>> .form-item:eq(1)

.add_to_cart से ट्री लेवल चाइल्ड में दूसरा -फॉर्म-आइटम

Comments

यह भी सवाल का कोई मतलब नहीं है

— त्यागें

>>> वह क्या है? क्या इस चयनकर्ता का कोई नाम है? क्या यह वैध चयनकर्ता भी है? या यह एक मजाक था?

— जॉन बो