Проверьте, является ли элемент дочерним по отношению к родительскому элементу

У меня есть следующий код.

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

Однако, это просто происходит, когда я нажимаю на него.

Что-то не так с моим кодом?

Ответ 1

Если вас интересует только прямой родитель, а не другие предки, вы можете просто использовать 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');
    }
}

Ответ 2

.has(), похоже, предназначен для этой цели. Поскольку он возвращает объект jQuery, вам необходимо также проверить для .length:

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

Ответ 3

Если у вас есть элемент, у которого нет определенного селектора, и вы все еще хотите проверить, является ли он потомком другого элемента, вы можете использовать jQuery.contains()

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

Вы можете передать родительский элемент и элемент, который вы хотите проверить на эту функцию, и он возвращает, если последний является потомком первого.

Ответ 4

Закончено с использованием .closest().

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

Ответ 5

Ванильный 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>

Ответ 6

Вы можете заставить свой код работать, просто заменив два термина:

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

У вас родились ребенок и родитель.

Ответ 7

В дополнение к другим ответам вы можете использовать этот менее известный метод для захвата элементов определенного родителя, например,

$('child', 'parent');

В вашем случае это будет

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

Обратите внимание на использование запятых между дочерним и родительским и их отдельные кавычки. Если они были окружены теми же цитатами

$('child, parent');

у вас будет объект, содержащий оба объекта, независимо от того, существуют ли они в деревьях документов.