JavaScript/jQuery:hasgendant/hasgendant

有趣的是，我很难找到一半好的方法来确定一个HTML元素是否在另一个元素中——这似乎应该是遍历和分析HTML DOM的基本核心功能。我感到非常惊讶和失望的是“hasGenerant”（或类似的）方法丢失了。

我正在尝试这样做：

var frog = $('#frog');
var walrus = $('#walrus');
if (frog.hasDescendant(walrus)) console.log("Frog is within walrus.");
else console.log("Frog is outside walrus.");

我尝试用许多jQuery组合来重现我所寻找的内容

walrus.is(frog.parents());
walrus.has(frog);
walrus.find(' *').has(frog);
frog.is(walrus.find(' *'));

我还没有找到有效的解决办法

---

[编辑]
解决方案：

海象（青蛙）

替代：

如果（海象有青蛙）{doStuff（）；}

替代：

var booleansult=walrus.has（frog.length>0


//追逐。
使用

if (walrus.has(frog).length) {
  // frog is contained in walrus..
}

演示


替代方案

if ( $('#frog').closest('#walrus').length ){
      // frog is contained in walrus..
}

演示在
如果您想编写自己的函数，您可以不使用jQuery，也可以这样做：

function isAncestor(ancestor, descendent) {
   while ((descendent = descendent.parentNode) != null)
      if (descendent == ancestor)
         return true;

   return false;
}

jQuery只有以下函数：：“检查一个DOM元素是否在另一个DOM元素中。”

演示（）：

HTML:

青蛙海象

JavaScript:

jQuery(function($) {
  var frog = $("#frog"),
      walrus = $("#walrus");

  display("frog contains walrus? " + $.contains(frog[0], walrus[0]));
  display("walrus contains frog? " + $.contains(walrus[0], frog[0]));

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});

jQuery（函数（$）{
变量青蛙=$（“#青蛙”），
海象=$（“海象”）；
显示（“青蛙包含海象？”+$。包含（青蛙[0]，海象[0]）；
显示（“海象包含青蛙？”+$.contains（海象[0]，青蛙[0]））；
功能显示（msg）{
$（“”）.html（msg.appendTo（document.body）；
}
});

阅读此答案后，我立即将

$.contains

应用到我的项目中，并惊讶地发现在某些我没有预料到的情况下，它失败了。我没有时间完全弄清楚，但我认为一些动态内容添加了

$（element）.html（newContent）

未能正确地将自身附加到DOM（导致HTMLElement.parentNode==null，进而导致

$.contains

失败）。这让人毛骨悚然，因为我有

$。返回的结果与我在firebug DOM视图中看到的结果直接矛盾。@ChaseMoskal:请参阅我对这个问题的评论。
jQuery(function($) {
  var frog = $("#frog"),
      walrus = $("#walrus");

  display("frog contains walrus? " + $.contains(frog[0], walrus[0]));
  display("walrus contains frog? " + $.contains(walrus[0], frog[0]));

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});