Как я могу проверить, находится ли элемент внутри другого в jQuery?

Question

Есть ли прямой способ в JavaScript или jQuery проверить, находится ли элемент внутри другого.

Я не имею в виду $(this).parent, поскольку элемент, который я хочу найти, может быть случайным числом шагов ниже в дереве элементов.

В качестве примера я хотел бы проверить, будет ли < div id="THIS DIV"> в пределах < div id="THIS PARENT">:

<div id="THIS_PARENT">
 <div id="random">
  <div id="random">
   <div id="random">
    <div id="THIS_DIV">
(... close all divs ...)

Так в псевдокоде:

 if($("div#THIS_DIV").isWithin("div#THIS_PARENT")) ...

Если нет прямого пути, я, вероятно, сделаю для этого функцию, но все же стоит спросить.

Answer 1

Вы можете сделать это:

if($('#THIS_DIV','#THIS_PARENT').length == 1) {

}

Указывая , определяя контекст для поиска (второй аргумент), мы в основном говорим: «ищите элемент с идентификатором #THIS_DIV внутри элемента с идентификатором #THIS_PARENT». Это самый лаконичный способ сделать это с помощью jQuery.

Мы могли бы также написать это, используя find, если это имеет для вас больше смысла:

if($('#THIS_PARENT').find('#THIS_DIV').length == 1) {

}

Или так, используя parents, если вы хотите искать от ребенка вверх:

if($('#THIS_DIV').parents('#THIS_PARENT').length == 1) {

}    

Все это должно работать нормально. Бит length необходим для того, чтобы длина «поиска» была> 0. Я, конечно, лично рекомендовал бы использовать первый, так как он самый простой.

Кроме того, если вы ссылаетесь на элемент по идентификатору, нет необходимости (хотя, конечно, это нормально) предварять селектор именем тега. Что касается скорости, то это не очень помогает, поскольку jQuery будет использовать встроенный getElementById() для внутреннего использования. Использование имени тега важно только при выборе по классу, поскольку div.myclass намного, намного быстрее, чем .myclass, если только <div> элементов будут иметь определенный класс.

Answer 2

С jQuery> = 1.4 (2010) вы можете использовать очень быструю функцию jQuery.contains ()

Этот статический метод работает с элементами DOM, а не с элементами jQuery и возвращает true или false.

jQuery.contains( container, descendant )

Пример: чтобы проверить, есть ли элемент в документе, вы можете сделать это:

jQuery.contains( document.body, myElement )