JavaScript / jQuery: hasDescendant / hasAncestor

Question

Весело, я испытываю невероятные трудности с поиском какого-либо наполовину удачного способа определить, находится ли элемент 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;

---

// Chase.

Answer 1

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);
  }
});

Answer 2

Если вы хотите написать свою собственную функцию, вы можете сделать это без jQuery, возможно, что-то вроде этого:

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

   return false;
}

Answer 3

Использование

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/