जांचें कि क्या कोई तत्व माता-पिता का बच्चा है

115

मेरे पास निम्न कोड है।

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>

<div id="hello">Hello <div>Child-Of-Hello</div></div>
<br />
<div id="goodbye">Goodbye <div>Child-Of-Goodbye</div></div>

<script type="text/javascript">
<!--
function fun(evt) {
    var target = $(evt.target);    
    if ($('div#hello').parents(target).length) {
        alert('Your clicked element is having div#hello as parent');
    }
}
$(document).bind('click', fun);
-->
</script>

</html>

मुझे उम्मीद है कि Child-Of-Helloक्लिक किए $('div#hello').parents(target).lengthजाने के बाद ही> 0 वापस आएगा।

हालाँकि, यह तब होता है जब भी मैं कहीं भी क्लिक करता हूं।

क्या मेरे कोड में कुछ गड़बड़ है?

javascript jquery

— चोक यान चेंग
स्रोत

160

यदि आप केवल प्रत्यक्ष माता-पिता में रुचि रखते हैं, और अन्य पूर्वजों में नहीं, तो आप बस इसका उपयोग कर सकते हैं parent(), और इसे चयनकर्ता को दे सकते हैं, जैसे कि target.parent('div#hello')।

उदाहरण: http://jsfiddle.net/6BX9n/

function fun(evt) {
    var target = $(evt.target);    
    if (target.parent('div#hello').length) {
        alert('Your clicked element is having div#hello as parent');
    }
}

या यदि आप यह देखना चाहते हैं कि क्या कोई पूर्वज मेल खाते हैं, तो उपयोग करें .parents()।

उदाहरण: http://jsfiddle.net/6BX9n/1/

function fun(evt) {
    var target = $(evt.target);    
    if (target.parents('div#hello').length) {
        alert('Your clicked element is having div#hello as parent');
    }
}

— user113716
स्रोत

19

कैसे यह jquery के बिना करने के लिए?

— सुपरब्यूपरड्यूपर

60

.has()इस उद्देश्य के लिए डिज़ाइन किया गया लगता है। चूँकि यह एक jQuery ऑब्जेक्ट देता है, इसलिए आपको इसके लिए भी परीक्षण करना होगा .length:

if ($('div#hello').has(target).length) {
   alert('Target is a child of #hello');
}

— Blazemonger
स्रोत

@redanimalwar right; यही करता है। आप मूल तत्व को ढूंढते हैं, फिर जांचें कि targetक्या इसके अंदर है।

— ब्लेज़ेमॉन्गर

22

IE8 + के लिए वेनिला 1-लाइनर:

parent !== child && parent.contains(child);

यहाँ, यह कैसे काम करता है:

function contains(parent, child) {
  return parent !== child && parent.contains(child);
}

var parentEl = document.querySelector('#parent'),
    childEl = document.querySelector('#child')
    
if (contains(parentEl, childEl)) {
  document.querySelector('#result').innerText = 'I confirm, that child is within parent el';
}

if (!contains(childEl, parentEl)) {
  document.querySelector('#result').innerText += ' and parent is not within child';
}

<div id="parent">
  <div>
    <table>
      <tr>
        <td><span id="child"></span></td>
      </tr>
    </table>
  </div>
</div>
<div id="result"></div>

स्निपेट का विस्तार करें

— अलेक्सांद्र माकोव
स्रोत

धन्यवाद, यह बहुत अद्भुत है! पुनरावृत्ति शांत होती है। मैं सोच रहा हूँ कि फ़ंक्शन का तर्क कैसे (अंदर) बनता है जिस पर फ़ंक्शन चल रहा है। क्या आपके पास उस पर अधिक जानकारी के लिए लिंक हो सकता है?

— जॉन

20

यदि आपके पास एक ऐसा तत्व है जिसमें एक विशिष्ट चयनकर्ता नहीं है और आप अभी भी जांचना चाहते हैं कि क्या यह किसी अन्य तत्व का वंशज है, तो आप jQuery.contains () का उपयोग कर सकते हैं

jQuery.contains (कंटेनर, समाहित)
वर्णन: यह देखने के लिए जांचें कि क्या एक DOM तत्व दूसरे DOM तत्व का वंशज है।

आप मूल तत्व और उस तत्व को पास कर सकते हैं जिसे आप उस फ़ंक्शन को जांचना चाहते हैं और यह वापस आ जाता है यदि बाद वाला पहले का वंशज है।

— naitsirch
स्रोत

3

$.containsDOM तत्वों को लेने पर अतिरिक्त ध्यान दें न कि jQuery इंस्टेंसेस पर, या यह हमेशा गलत होगा।

— एलेक्लेरसन

याद रखने के लिए एक और विवरण: $.containsयदि दो तर्क समान तत्व हैं तो कभी भी सही नहीं होंगे। यदि आप चाहते हैं कि, का उपयोग करें domElement.contains(domElement)।

— एलेक्लेरसन

9

इसके बजाय .closest () का उपयोग करके समाप्त किया गया।

$(document).on("click", function (event) {
    if($(event.target).closest(".CustomControllerMainDiv").length == 1)
    alert('element is a child of the custom controller')
});

— लुकास
स्रोत

3

आप केवल दो शब्दों की अदला-बदली करके अपना कोड प्राप्त कर सकते हैं:

if ($(target).parents('div#hello').length) {

आपने बच्चे और माता-पिता को गलत तरीके से गोल किया था।

— tttppp
स्रोत

2

var target = $(evt.target);तो आपके कोड को पढ़ना चाहिए if (target.parents('div#hello').length) {और नहीं...$(target)...

— पीटर अज़ताई

0

अन्य उत्तरों के अलावा, आप इस निश्चित विधि का उपयोग कर सकते हैं ताकि कुछ अभिभावकों के तत्वों को पकड़ा जा सके,

$('child', 'parent');

आपके मामले में, यह होगा

if ($(event.target, 'div#hello')[0]) console.log(`${event.target.tagName} is an offspring of div#hello`);

बच्चे और माता-पिता के बीच अल्पविरामों के उपयोग और उनके अलग उद्धरण चिह्नों पर ध्यान दें। यदि वे एक ही उद्धरण से घिरे थे

$('child, parent');

आपके पास दोनों वस्तुओं से युक्त एक वस्तु होगी, भले ही वे अपने दस्तावेज़ पेड़ों में मौजूद हों।

— मुझे जवाब चाहिए
स्रोत

यह एक शांत हैक है, लेकिन आईडी, या कक्षाओं के बिना तत्वों के साथ अच्छी तरह से काम नहीं करता है

— aln447