2

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

我正在尝试这样做：

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(' *'));



我还没有找到可行的解决方案。

[编辑]
解决方案： walrus.has(frog)
备用： if (walrus.has(frog)) { doStuff(); }
备用： var booleanResult = walrus.has(frog).length>0;

//追赶。

4

3 回答 3

4

jQuery 有这样的功能jQuery.contains：“检查一个 DOM 元素是否在另一个 DOM 元素中。”

演示（现场副本）：

HTML：

<p id="frog">Frog <span id="walrus">walrus</span></p>

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);
  }
});
于 2011-11-07T09:27:16.187 回答
2

采用

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

演示在http://jsfiddle.net/gaby/pZfLm/

替代

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

演示在http://jsfiddle.net/gaby/pZfLm/1/

于 2011-11-07T09:20:54.690 回答
2

如果你想编写自己的函数，你可以不用 jQuery 来完成，可能是这样的：

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

   return false;
}
于 2011-11-07T09:25:44.923 回答