Перевірте, чи елемент є дитиною батька

115

У мене є такий код.

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

Я очікую, що лише після Child-Of-Helloнатискання на нього $('div#hello').parents(target).lengthповернеться> 0.

Однак це відбувається лише коли я натискаю будь-де.

Щось із моїм кодом не так?

javascript jquery

— Чак Ян Ченг
джерело

160

Якщо вас цікавить лише прямий батько, а не інші предки, ви можете просто скористатися parent()і дати йому селектор, як в target.parent('div#hello').

Приклад: 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');
    }
}

Або якщо ви хочете перевірити, чи є якісь предки, які відповідають, то скористайтеся .parents().

Приклад: 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');
    }
}

— користувач113716
джерело

19

як це зробити без jquery?

— SuperUberDuper

60

.has()Здається, призначений для цієї мети. Оскільки він повертає об’єкт jQuery, ви також повинні перевірити .length:

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

— Blazemonger
джерело

@redanimalwar Right; ось що це робить. Ви знайдете батьківський елемент, а потім перевірте, чи targetзнаходиться всередині нього.

— Blazemonger

22

Ванільний 1-вкладиш для IE8 +:

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

Ось, як це працює:

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>

Розгорніть фрагмент

— Олександр Маков
джерело

Дякую, це досить дивовижно! Рекурсія прохолодна. Мені цікаво, як аргумент функції стає (всередині) об'єктом, над яким функціонує функція. Може у вас є посилання на додаткову інформацію про це?

— ДжонК

20

Якщо у вас є елемент, у якого немає конкретного селектора, і ви все ще хочете перевірити, чи є нащадком іншого елемента, ви можете використовувати jQuery.contains ()

jQuery.contains (контейнер, що міститься)
Опис: Перевірте, чи елемент DOM є нащадком іншого елемента DOM.

Ви можете передати батьківський елемент і елемент, який ви хочете перевірити, до цієї функції, і він повертається, якщо останній є нащадком першого.

— naitsirch
джерело

3

Приділіть додаткову увагу $.containsприйому елементів DOM, а не випадків jQuery, інакше вони завжди повертатимуться хибними.

— aleclarson

Ще одна деталь, яку слід пам’ятати: $.containsніколи не повертає істину, якщо два аргументи є одним і тим же елементом. Якщо ви цього хочете, використовуйте domElement.contains(domElement).

— aleclarson

9

Закінчив замість цього .closest ().

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

— Лукаш
джерело

3

Ви можете змусити код працювати, просто помінявши два терміни:

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

У вас дитина та батьки були неправильними.

— tttppp
джерело

2

var target = $(evt.target);тож ваш код повинен читати, if (target.parents('div#hello').length) {а не...$(target)...

— Пітер Айтай

0

Окрім інших відповідей, ви можете використовувати цей менш відомий метод, щоб схопити елементи певного батьківського типу, наприклад,

$('child', 'parent');

У вашому випадку це було б

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

Зверніть увагу на використання коми між дитиною та батьком та їх окремі лапки. Якби їх оточували однакові цитати

$('child, parent');

у вас буде об’єкт, що містить обидва об'єкти, незалежно від того, чи існують вони в їх деревах документів.

— Я хочу відповіді
джерело

Це класний хакер, але він не працює з елементами без ідентифікаторів чи класів

— aln447