jquery अगर div id में बच्चे हैं

Question

यह- ifमुझे क्या परेशानी दे रहा है:

if (div id=myfav has children) {
   do something
} else {
   do something else 
}

मैंने निम्नलिखित सभी की कोशिश की:

if ( $('#myfav:hasChildren') ) { do something }
if ( $('#myfav').children() ) { do something }
if ( $('#myfav:empty') ) { do something }
if ( $('#myfav:not(:has(*))') ) { do something }

Answer 1

if ( $('#myfav').children().length > 0 ) {
     // do something
}

यह काम करना चाहिए। children()समारोह एक JQuery उद्देश्य यह है कि बच्चों में शामिल है देता है। तो आपको बस आकार की जांच करने और यह देखने की आवश्यकता है कि क्या इसमें कम से कम एक बच्चा है।

Comments

जवाब के लिए धन्यवाद। मेरे लिए यही काम करता है। मुझे पता था कि मैं .children () के साथ सही रास्ते पर था, लेकिन यह नहीं जानता था कि इसमें क्या गलत था। स्पष्ट रूप से आकार 0 हो सकता है, समझ में आता है।

— क्रिस

यदि आप बच्चों के लिए एक चयनकर्ता को जोड़ते हैं, तो आप यह भी देख सकते हैं कि किसी तत्व में बच्चे हैं जो किसी विशेष चयनकर्ता से मेल खाते हैं, जैसे कि आप यह देखना चाहते हैं कि क्या तत्व में किसी विशेष वर्ग का बच्चा है या नहीं।

— मुहद्

छोटी सी बात। नाइटिकिक का मतलब नहीं है, लेकिन children().lengthआकार () के बजाय jQuery डॉक्स के अनुसार यहां बुलाया जाना चाहिए: api.jquery.com/size

— ब्रायन शावेज

और क्या होगा यदि नोड में केवल पाठ हो !?

— बोटनवूवर

@sirwilliam नोड 0 लंबाई के साथ वापस आ जाएगा।

— मेक्की

Answer 2

यह स्निपेट यह निर्धारित करेगा कि तत्व में :parentचयनकर्ता का उपयोग करने वाले बच्चे हैं :

if ($('#myfav').is(':parent')) {
    // do something
}

ध्यान दें कि :parentमाता-पिता होने के लिए एक या अधिक पाठ नोड्स के साथ एक तत्व पर भी विचार करता है।

इस प्रकार divतत्वों में <div>some text</div>और <div><span>some text</span></div>प्रत्येक को माता-पिता माना जाएगा लेकिन माता-पिता <div></div>नहीं हैं।

Comments

हां, मुझे लगता है कि यह उत्तर एस पैंगबोर्न की तुलना में अधिक सुरुचिपूर्ण है। दोनों हालांकि पूरी तरह से वैध हैं।

— काइलफ़ारिस 18

@Milo LaMar, मुझे संदेह है कि प्रदर्शन में बहुत अंतर नहीं है, लेकिन यह सुनिश्चित करने का एकमात्र तरीका इसे आज़माना है! इसके अलावा, आप के बीच की जगह को दूर करना होगा #myfavऔर :parent, अपने उदाहरण में अन्यथा चयनकर्ता मेरा उत्तर क्या प्रदान करेगा के रूप में ही नहीं है।

— dcharles

पढ़ने की एक बहुत छोटी राशि मेरे लिए पर्याप्त उत्तर दिया। से लिया api.jquery.com/parent-selector Additional Notes: Because :parent is a jQuery extension and not part of the CSS specification, queries using :parent cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :parent to select elements, first select the elements using a pure CSS selector, then use .filter(":parent").

— मिलो लैमर

प्रदर्शन परीक्षा परिणाम 0.002s में - मैं इस तरह से पसंद करता हूं, क्योंकि यह सबसे अच्छा पठनीय है ...

— dtrunk

मैं उलझन में हूँ, यह सबसे अच्छा जवाब नहीं है?

— आंद्रेई क्रिस्टियन प्रोडन

Answer 3

एक और विकल्प, बस इसके लिए यह होगा:

if ( $('#myFav > *').length > 0 ) {
     // do something
}

यह वास्तव में सबसे तेज़ हो सकता है क्योंकि यह कड़ाई से सिज़ल इंजन का उपयोग करता है और जरूरी नहीं कि कोई jQuery हो, जैसा कि यह था। हालांकि गलत हो सकता है। फिर भी, यह काम करता है।

Answer 4

इसके लिए वास्तव में काफी सरल देशी तरीका है:

if( $('#myfav')[0].hasChildNodes() ) { ... }

ध्यान दें कि इसमें सरल पाठ नोड्स भी शामिल हैं, इसलिए यह a के लिए सही होगा <div>text</div>।

Comments

$(...)[0] is undefinedऐसा #myfavनहीं होने पर हो सकता है। मैं उस स्थिति को लागू करने से पहले पहले मिलान वाले तत्व के अस्तित्व का परीक्षण करूँगा, यानी $('#myfav')[0] && $('#myfav')[0].hasChildNodes():।

— CPHPython

Answer 5

और यदि आप जांच करना चाहते हैं कि दिव्यांग बच्चों के बच्चे हैं (कहते <p>हैं:

if ($('#myfav').children('p').length > 0) {
     // do something
}

Answer 6

आप यह भी जांच सकते हैं कि दिव्यांग के विशिष्ट बच्चे हैं या नहीं,

if($('#myDiv').has('select').length>0)
{
   // Do something here.
   console.log("you can log here");

}

Answer 7

JQuery तरीका है

JQuery में, आप $('#id').children().length > 0परीक्षण कर सकते हैं कि किसी तत्व के बच्चे हैं या नहीं।

डेमो

var test1 = $('#test');
var test2 = $('#test2');

if(test1.children().length > 0) {
    test1.addClass('success');
} else {
    test1.addClass('failure');
}

if(test2.children().length > 0) {
    test2.addClass('success');
} else {
    test2.addClass('failure');
}

.success {
    background: #9f9;
}

.failure {
    background: #f99;
}

<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<div id="test">
   <span>Children</span>
</div>
<div id="test2">
   No children
</div>

---

वेनिला जेएस रास्ता

यदि आप jQuery का उपयोग नहीं करना चाहते हैं, तो आप यह document.getElementById('id').children.length > 0जांचने के लिए उपयोग कर सकते हैं कि किसी तत्व में बच्चे हैं या नहीं।

डेमो

var test1 = document.getElementById('test');
var test2 = document.getElementById('test2');

if(test1.children.length > 0) {
    test1.classList.add('success');
} else {
    test1.classList.add('failure');
}

if(test2.children.length > 0) {
    test2.classList.add('success');
} else {
    test2.classList.add('failure');
}

.success {
    background: #9f9;
}

.failure {
    background: #f99;
}

<div id="test">
   <span>Children</span>
</div>
<div id="test2">
   No children
</div>