तत्व का चयन कैसे करें जिसमें इसके अंदर कोई लिंक न हो?

Question

इस HTML को देखते हुए:

<ul> 
    <li><a href="/artists/gil_elvgren/activity_stream">Activity Stream</a></li> 
    <li><a href="/artists/gil_elvgren/likes">Likes</a></li> 
    <li>Favorites</li> 
    <li><a href="/artists/gil_elvgren/follows">Follows</a></li> 
    <li><a href="/artists/gil_elvgren/sketchbook_comments">Whiteboard</a></li> 

</ul> 

मैं एकल लाइन आइटम है कि इसके अंदर एक लिंक नहीं है में class="current" इंजेक्षन करना चाहते हैं।

मैं ऐसे तत्व को खोजने के लिए jQuery का उपयोग कैसे करूं जिसमें बच्चा न हो?

Answer 1

$("li").each(function(){ 
    if($(this).children().length == 0){ 
     //found current.. 
     $(this).addClass("current"); 
    } 
}); 

Answer 2

मेरा सुझाव है कि आप सिर्फ तत्वों कि उन में लिंक के बीच यह अंतर करने के लिए अपने <li> के अंदर एक <span> तत्व जोड़ना होगा।

<ul> 
    <li><a href="/artists/gil_elvgren/activity_stream">Activity Stream</a></li> 
    <li><a href="/artists/gil_elvgren/likes">Likes</a></li> 
    <li><span>Favorites</span></li> 
    <li><a href="/artists/gil_elvgren/follows">Follows</a></li> 
    <li><a href="/artists/gil_elvgren/sketchbook_comments">Whiteboard</a></li> 
</ul> 

सीएसएस:

ul li a { /* Link CSS */ } 
ul li span { /* Current CSS */ } 

Answer 3

<li> चुनें तत्व :has और :not चयनकर्ता का उपयोग करके कोई <a> बच्चा है कि:

$("li:not(:has(a))").addClass("current"); 

jsFiddle

- EDIT -

हालांकि यह सबसे छोटा समाधान हो सकता है, पठनीयता एक तरफ है, यह निश्चित रूप से गति के संबंध में सबसे अच्छा नहीं है।

इस बात को ध्यान में रखते हुए, मैं सुझाव दूंगा कि आप द्वारा प्रदान किए गए एक महान answer देखें।

इस के बाद से, आप कुछ (या कोई अन्य मेरे सहित किसी को भी) एक बार से अधिक का उपयोग करते हुए अंत में हो सकता है मैं इस प्लगइन/विधि आप क्रम में DRY करने के लिए अपने कोड का उपयोग कर सकते के साथ jQuery थोड़ा विस्तार किया है:

jQuery.fn.thatHasNo = function(element, method) { 
    if (typeof method === "undefined" || method === null) method = "children"; 
    return this.not(function() { 
    return $(this)[method](element).length; 
    }); 
}; 

जो तुम फोन कर सकते हैं साथ:

$("li").thatHasNo("a").addClass("current"); 

इस विस्तार, डिफ़ॉल्ट रूप से (यदि विधि के लिए दूसरा तर्क पारित नहीं किया जाता है), अगर कोई प्रत्यक्ष सन्तान (children) है कि मैच प्रदान की चयनकर्ता रहे हैं की जाँच करेगा। हालांकि, आप विधि के लिए दूसरे तर्क के रूप में tree-traversal parameter प्रदान कर सकते हैं। तो, यह निम्नलिखित में से किसी के रूप में लिखा जा सकता है:

$("li").thatHasNo("a", "children").addClass("current"); 
//... 
$("li").thatHasNo("a", "find").addClass("current"); 
//... 
$("li").thatHasNo(".class", "siblings").addClass("lame"); 

मैं jsFiddle अद्यतन किया है कि प्रतिबिंबित करने के लिए।

Answer 4

आपको फिल्टर फ़ंक्शन के साथ .not() विधि (जो मूल रूप से अस्वीकृत .filter()) का उपयोग करना चाहिए।

$('li') /* select the elements you want to test */ 
    .not(function() { /* run a filter function on them */ 
     /* those that have a direct children link (use find() if you need 
     any kind of children) will return true thus excluded */ 
     return $(this).children('a').length; 
    }) 
    .addClass('current'); /* add our beloved class */ 

jsFiddle Demo

---

तुम भी @Krule suggested के रूप में, जटिल चयनकर्ताओं का उपयोग कर सकता है, लेकिन मैं इसे कम पठनीय खोजने के लिए और भी jQuery manual on :not() इसके खिलाफ चेतावनी देते हैं:

.not() विधि आपको जटिल चयनकर्ताओं या चरों को धक्का देने से अधिक पढ़ने योग्य चयन प्रदान करेगी: नहीं() सेल सीटीआर फ़िल्टर। ज्यादातर मामलों में, यह एक बेहतर विकल्प है।

इसके अलावा, :has() वास्तव में के रूप में अच्छी तरह से सिफारिश की है नहीं:

क्योंकि: (है) एक jQuery विस्तार और सीएसएस विनिर्देशन का हिस्सा नहीं, प्रश्नों का उपयोग कर रहा है: (है) का लाभ नहीं ले जा सकते हैं मूल DOM क्वेरी SelectorAll() विधि द्वारा प्रदान किया गया प्रदर्शन बढ़ावा। आधुनिक ब्राउज़रों में बेहतर प्रदर्शन के लिए, $ ("your-pure-css-selector") का उपयोग करें। इसके बजाय (चयनकर्ता/DOMElement) है।