Kiểm tra xem một phần tử có phải là phần tử con của phần tử gốc hay không

115

Tôi có mã sau đây.

<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 mong đợi chỉ khi Child-Of-Hellođược nhấp vào, $('div#hello').parents(target).lengthsẽ 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ó gì đó sai với mã của tôi?

javascript jquery

— Cheok Yan Cheng
nguồn

160

Nếu bạn chỉ quan tâm đến cha mẹ trực tiếp chứ không phải tổ tiên khác, bạn có thể chỉ cần sử dụng parent()và cung cấp cho nó bộ 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 có tổ tiên nào hợp nhau không thì 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');
    }
}

— người dùng113716
nguồn

19

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

— SuperUberDuper

60

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

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

— Blazemonger
nguồn

@redanimalwar Đúng; đó là những gì điều này làm. Bạn tìm phần tử cha, sau đó kiểm tra xem targetcó bên trong nó hay không.

— Blazemonger

22

Vanilla 1-liner cho IE8 +:

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

Đây, cách 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>

Mở rộng đoạn mã

— Aleksandr Makov
nguồn

Cảm ơn, điều đó thật tuyệt vời! Đệ quy rất tuyệt. Tôi tự hỏi làm thế nào đối số của hàm trở thành (bên trong) đối tượng mà hàm hoạt động trên đó. Bạn có thể có một liên kết để biết thêm thông tin về điều đó?

— JohnK

20

Nếu bạn có một phần tử không có bộ chọn cụ thể và bạn vẫn muốn kiểm tra xem nó có phải là con của một phần tử khác hay không, bạn có thể sử dụng jQuery.contains ()

jQuery.contains (container, chứa)
Mô tả: Kiểm tra xem phần tử DOM có phải là con của phần tử DOM khác hay không.

Bạn có thể chuyển phần tử cha và phần tử mà bạn muốn kiểm tra vào hàm đó và nó sẽ trả về nếu phần tử sau là con của phần tử đầu tiên.

— naitsirch
nguồn

3

Hãy chú ý thêm đến $.containsviệc lấy các phần tử DOM chứ không phải các phiên bản jQuery, nếu không nó sẽ luôn trả về false.

— aleclarson

Một chi tiết khác cần nhớ: $.containskhô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 đó, hãy sử dụng domElement.contains(domElement).

— aleclarson

9

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

— Lukas
nguồn

3

Bạn có thể làm cho mã của mình hoạt động bằng cách hoán đổi hai thuật ngữ:

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

Bạn đã sinh con và làm cha mẹ sai cách.

— tttppp
nguồn

2

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

— Peter Ajtai

0

Ngoài các 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 phần 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à 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ác dấu ngoặc kép giống nhau

$('child, parent');

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

— Tôi muốn câu trả lời
nguồn

Đây là một bản hack thú vị, nhưng không hoạt động tốt với các phần tử không có id hoặc lớp

— aln447