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

Jawaban:

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