如何在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) {

}

通过指定搜索的上下文(第二个参数),我们基本上说"查找ID #THIS_DIV在ID为#THIS_PARENT" 的元素内的元素.这是使用jQuery进行此操作的最简洁方式.

find如果对你更有意义的话,我们也可以像这样写它:

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

}

或者像这样,使用parents,如果你想从孩子向上搜索:

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

}    

任何这些应该工作正常.这个length位是必要的,以确保"搜索"的长度> 0.我当然会建议你选择第一个,因为它是最简单的.

此外,如果您通过ID引用元素,则不必(尽管当然完全可以)在选择器前面添加标签名称.但就速度而言,它并没有真正帮助,因为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 )