Bir elemanın bir ebeveynin çocuğu olup olmadığını kontrol edin

Takip koduna sahibim.

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

Yalnızca Child-Of-Hellotıklandığında bekliyorum , $('div#hello').parents(target).length> 0 döndürür.

Ancak, herhangi bir yere tıkladığımda oluyor.

Kodumda bir sorun mu var?

Yalnızca doğrudan ebeveynle ilgileniyorsanız ve diğer atalarla ilgilenmiyorsanız, sadece kullanabilir parent()ve seçiciyi olarak verebilirsiniz target.parent('div#hello').

Örnek: 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');
    }
}

Veya eşleşen atalar olup olmadığını kontrol etmek istiyorsanız, o zaman kullanın .parents().

Örnek: 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()bu amaç için tasarlanmış gibi görünüyor. Bir jQuery nesnesi döndürdüğü için, şunları da test etmelisiniz .length:

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

IE8 + için 1 astarlı vanilya:

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

İşte nasıl çalışıyor:

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>

Belirli bir seçiciye sahip olmayan bir öğeniz varsa ve yine de başka bir öğenin soyundan gelip gelmediğini kontrol etmek istiyorsanız, jQuery.contains () öğesini kullanabilirsiniz.

jQuery.contains (kapsayıcı, içerilen)
Açıklama: Bir DOM öğesinin başka bir DOM öğesinin soyundan gelip gelmediğini kontrol edin.

Kontrol etmek istediğiniz ana öğeyi ve öğeyi bu işleve aktarabilirsiniz ve ikincisi ilkinin soyundan gelirse geri döner.

Bunun yerine .closest () kullanılarak sona erdi.

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

Sadece iki terimi değiştirerek kodunuzun çalışmasını sağlayabilirsiniz:

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

Çocuğu ve ebeveyni yanlış yoldan çevirdiniz.

Diğer cevaplara ek olarak, bu daha az bilinen yöntemi, belirli bir ebeveynin aşağıdaki gibi öğelerini almak için kullanabilirsiniz,

$('child', 'parent');

Senin durumunda, bu olurdu

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

Çocuk ve ebeveyn arasında virgül ve bunların ayrı tırnak işaretlerinin kullanıldığına dikkat edin. Aynı alıntılarla çevrelenmişlerse

$('child, parent');

belge ağaçlarında bulunup bulunmadığına bakılmaksızın, her iki nesneyi de içeren bir nesneniz olur.