Kiểm tra xem phần tử có phải là con của cha/mẹ

Tôi có mã sau không.Kiểm tra xem phần tử có phải là con của cha/mẹ

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

Tôi chỉ mong đợi khi Child-Of-Hello được nhấp, $('div#hello').parents(target).length sẽ trả về> 0.

Tuy nhiên, nó chỉ xảy ra bất cứ khi nào tôi nhấp vào bất kỳ đâu.

Có vấn đề gì với mã của tôi không?

Nguồn

2010-09-20 Cheok Yan Cheng

130

Nếu bạn chỉ quan tâm đến cha mẹ trực tiếp và không phải là tổ tiên khác, bạn chỉ có thể sử dụng parent() và cung cấp cho công cụ chọn, như trong target.parent('div#hello').

Ví dụ: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'); 
    } 
}

Hoặc nếu bạn muốn kiểm tra để xem nếu có bất kỳ tổ tiên trận đấu đó, sau đó sử dụng .parents().

Ví dụ: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'); 
    } 
}

Nguồn

2010-09-20 17:04:40 user113716

làm thế nào để làm điều đó mà không jquery? – SuperUberDuper

Bạn có thể lấy mã của bạn để làm việc bằng cách chỉ trao đổi hai thuật ngữ:

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

Bạn có đứa trẻ và cha mẹ tròn một cách sai lầm.

Nguồn

2010-09-20 17:07:08 tttppp

'var target = $ (evt.target);' do đó mã của bạn nên đọc 'if (target.parents ('div # hello'). Length) {' và không '... $ (target) ...' –

.has() dường như được thiết kế cho mục đích này. Kể từ khi nó trả về một đối tượng jQuery, bạn phải kiểm tra cho .length cũng như:

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

Nguồn

2013-06-11 13:31:37 Blazemonger

@redanimalwar Right; đó là điều này. Bạn tìm thấy phần tử cha, sau đó kiểm tra xem 'target' có nằm trong nó hay không. – Blazemonger

Nếu bạn có một yếu tố mà không có một chọn cụ thể và bạn vẫn muốn kiểm tra xem nó là một hậu duệ của một yếu tố khác, bạn có thể sử dụng jQuery.contains()

jQuery.contains (container, chứa)
Mô tả: Kiểm tra xem nếu một phần tử DOM là một hậu duệ của một phần tử DOM.

Bạn có thể chuyển phần tử gốc và phần tử bạn muốn kiểm tra đến hàm đó và nó trả về nếu sau này là hậu duệ của phần tử đầu tiên.

Nguồn

2013-11-15 11:50:50 naitsirch

Chú ý thêm đến '$ .contains' lấy các phần tử DOM và ** không ** các cá thể jQuery, hoặc nó sẽ luôn trả về false. – aleclarson

Một chi tiết khác cần nhớ: '$ .contains' không bao giờ trả về true nếu hai đối số là cùng một phần tử. Nếu bạn muốn điều đó, sử dụng 'domElement.contains (domElement)'. – aleclarson

Đã kết thúc bằng cách sử dụng .closest() thay thế.

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

Nguồn

2014-04-30 16:46:51 Lukas

Bên cạnh những câu trả lời khác, bạn có thể sử dụng phương pháp ít được biết đến này để lấy các yếu tố của một phụ huynh nhất định như vậy,

$('child', 'parent');

Trong trường hợp của bạn, đó sẽ là

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

Lưu ý việc sử dụng dấu phẩy giữa con và cha mẹ và dấu ngoặc kép riêng biệt của chúng.Nếu chúng được bao quanh bởi cùng một dấu ngoặc kép

$('child, parent');

bạn sẽ có đối tượng chứa cả hai đối tượng, bất kể chúng tồn tại trong cây tài liệu của chúng.

Nguồn

2017-05-11 17:38:44

Vanilla 1-liner cho IE8 +:

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

Ở đây, làm thế nào nó hoạt động:

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>

Nguồn

2017-11-25 10:58:17

Kiểm tra xem phần tử có phải là con của cha/mẹ

Trả lời

Các vấn đề liên quan