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

Есть ли какой-либо прямой способ в 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")) ...

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

Ответ 1

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

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

}

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

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

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

}

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

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

}

Любое из них должно работать нормально. Бит length необходим, чтобы убедиться, что длина "поиска" равнa > 0. Я, конечно, лично рекомендую вам перейти к первому, поскольку это самый простой.

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

Ответ 2

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

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

jQuery.contains( container, descendant )

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

jQuery.contains( document.body, myElement )