2

面白いことに、HTML 要素が別の要素の中にあるかどうかを判断するための半端な方法を見つけるのに非常に苦労しています。「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

独自の関数を作成したい場合は、jQueryなしでそれを行うことができます。おそらく次のようなものです。

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

   return false;
}
于 2011-11-07T09:25:44.923 に答える
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 に答える