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

115

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?

javascript jquery

— Cheok Yan Cheng
kaynak

160

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

— user113716
kaynak

19

jquery olmadan nasıl yapılır?

— SuperUberDuper

60

.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');
}

— Blazemonger
kaynak

@redanimalwar Sağ; bu yaptığı şey bu. Ana öğeyi bulup targetiçinde olup olmadığını kontrol edin .

— Blazemonger

22

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>

Snippet'i genişlet

— Aleksandr Makov
kaynak

Teşekkürler, bu oldukça harika! Özyineleme harika. Fonksiyonun argümanının, fonksiyonun üzerinde çalıştığı nesnenin (içinde) nasıl olduğunu merak ediyorum. Bununla ilgili daha fazla bilgi için bir bağlantınız olabilir mi?

— JohnK

20

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.

— naitsirch
kaynak

3

JQuery örneklerini değil , $.containsDOM öğelerini almaya özellikle dikkat edin , aksi takdirde her zaman yanlış döndürür.

— aleclarson

Hatırlanması gereken başka bir ayrıntı: $.containsİki bağımsız değişken aynı öğeyse asla doğru döndürmez. Eğer bunu istiyorsan kullan domElement.contains(domElement).

— aleclarson

9

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

— Lukas
kaynak

3

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.

— tttppp
kaynak

2

var target = $(evt.target);bu nedenle kodunuz okunmalı if (target.parents('div#hello').length) {ve olmamalıdır...$(target)...

— Peter Ajtai

0

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.

— Cevap İstiyorum
kaynak

Bu harika bir hack, ancak kimlikleri veya sınıfları olmayan öğelerle iyi çalışmıyor

— aln447