Periksa apakah suatu elemen adalah anak dari orang tua

115

Saya memiliki kode berikut.

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

Saya berharap hanya ketika Child-Of-Hellodiklik, $('div#hello').parents(target).lengthakan kembali> 0.

Namun, itu terjadi begitu saja setiap kali saya mengklik di mana saja.

Apakah ada yang salah dengan kode saya?

javascript jquery

— Cheok Yan Cheng
sumber

160

Jika Anda hanya tertarik pada orang tua langsung, dan bukan leluhur lainnya, Anda bisa menggunakan parent(), dan memberikan selektor, seperti pada target.parent('div#hello').

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

Atau jika Anda ingin memeriksa untuk melihat apakah ada leluhur yang cocok, gunakan .parents().

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

— pengguna113716
sumber

19

bagaimana melakukannya tanpa jquery?

— SuperUberDuper

60

.has()tampaknya dirancang untuk tujuan ini. Karena mengembalikan objek jQuery, Anda harus mengujinya .lengthjuga:

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

— Blazemonger
sumber

@redanwar Kanan; itulah yang dilakukannya. Anda menemukan elemen induk, lalu periksa apakah targetada di dalamnya.

— Blazemonger

22

Vanilla 1-liner untuk IE8 +:

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

Di sini, cara kerjanya:

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>

Luaskan cuplikan

— Aleksandr Makov
sumber

Terima kasih, itu luar biasa! Rekursi itu keren. Saya bertanya-tanya bagaimana argumen fungsi menjadi (di dalam) objek tempat fungsi beroperasi. Mungkinkah Anda memiliki tautan ke informasi lebih lanjut tentang itu?

— JohnK

20

Jika Anda memiliki elemen yang tidak memiliki selektor khusus dan Anda masih ingin memeriksa apakah itu turunan dari elemen lain, Anda dapat menggunakan jQuery.contains ()

jQuery.contains (container, contains)
Deskripsi: Periksa apakah elemen DOM adalah turunan dari elemen DOM lain.

Anda bisa meneruskan elemen induk dan elemen yang ingin Anda periksa ke fungsi itu dan mengembalikan jika yang terakhir adalah turunan dari yang pertama.

— naitsirch
sumber

3

Berikan perhatian ekstra untuk $.containsmengambil elemen DOM dan bukan instance jQuery, atau itu akan selalu mengembalikan false.

— aleclarson

Detail lain yang perlu diingat: $.containstidak pernah mengembalikan nilai true jika dua argumen adalah elemen yang sama. Jika Anda menginginkannya, gunakan domElement.contains(domElement).

— aleclarson

9

Akhirnya menggunakan .closest () sebagai gantinya.

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

— Lukas
sumber

3

Anda bisa membuat kode Anda berfungsi hanya dengan menukar dua istilah:

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

Anda memiliki anak dan orang tua yang salah jalan.

— tttppp
sumber

2

var target = $(evt.target);jadi kode Anda harus dibaca if (target.parents('div#hello').length) {dan tidak...$(target)...

— Peter Ajtai

0

Selain jawaban lainnya, Anda dapat menggunakan metode yang kurang dikenal ini untuk mengambil elemen dari induk tertentu seperti,

$('child', 'parent');

Dalam kasus Anda, itu akan terjadi

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

Perhatikan penggunaan koma antara anak dan orang tua serta tanda kutip terpisah mereka. Jika mereka dikelilingi oleh kutipan yang sama

$('child, parent');

Anda akan memiliki objek yang berisi kedua objek, terlepas dari apakah objek tersebut ada di pohon dokumennya.

— Saya Ingin Jawaban
sumber

Ini adalah peretasan yang keren, tetapi tidak berfungsi dengan baik dengan elemen tanpa id, atau kelas

— aln447