Sprawdź, czy element jest dzieckiem rodzica

Mam następujący kod.

<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>

Spodziewam się, że tylko po Child-Of-Hellokliknięciu $('div#hello').parents(target).lengthzwróci> 0.

Jednak dzieje się tak po prostu za każdym razem, gdy kliknę w dowolnym miejscu.

Czy coś jest nie tak z moim kodem?

Jeśli interesuje Cię tylko bezpośredni rodzic, a nie inni przodkowie, możesz po prostu użyć parent()i nadać mu selektor, jak w target.parent('div#hello').

Przykład: 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');
    }
}

Lub jeśli chcesz sprawdzić, czy są jacyś zgodni przodkowie, użyj .parents().

Przykład: 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');
    }
}

.has()wydaje się być przeznaczony do tego celu. Ponieważ zwraca obiekt jQuery, musisz również przetestować .length:

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

Vanilla 1-liner dla IE8 +:

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

Oto jak to działa:

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>

Jeśli masz element, który nie ma określonego selektora i nadal chcesz sprawdzić, czy jest potomkiem innego elementu, możesz użyć jQuery.contains ()

jQuery.contains (kontener, zawarty)
Opis: sprawdź, czy element DOM jest potomkiem innego elementu DOM.

Możesz przekazać element nadrzędny i element, który chcesz sprawdzić, do tej funkcji i zwraca ona, jeśli ten drugi jest potomkiem pierwszego.

Skończyło się na użyciu .closest () zamiast.

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

Aby kod działał, wystarczy zamienić dwa terminy:

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

Zabrałeś dziecko i rodzica w niewłaściwy sposób.

Oprócz innych odpowiedzi możesz użyć tej mniej znanej metody, aby pobrać elementy określonego rodzica, takie jak:

$('child', 'parent');

W twoim przypadku tak by było

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

Zwróć uwagę na użycie przecinków między dzieckiem a rodzicem oraz ich oddzielnymi cudzysłowami. Gdyby były otoczone tymi samymi cudzysłowami

$('child, parent');

miałbyś obiekt zawierający oba obiekty, niezależnie od tego, czy istnieją one w ich drzewach dokumentów.