$ .contains（）jquery関数はどのように動作しますか？

Question

jQueryを初めて使用していて、$ .contains（）がjQueryでどのように動作するのか分かりません。 このコードを試してみましたが、ブール値を示していますが、正確な動作はわかりません。

HTML：

<div> 
<span>MM</span> 
</div> 

jqueryのコード：

$(document).ready(function() { 
if($.contains($('div'), $('span')) == true){ 
    alert('yup'); 
    }; 
}); 

誰が説明することができます...

Answer 1

containsのjQueryメソッドは、第2引数が第1引数の子または子孫であるとみなします。最初の引数はElementやDocumentのようなDOMオブジェクトでなければなりませんが、2番目の引数がDOMオブジェクトでなくても（jQueryコレクションを渡すなど）予期しない動作に気付きました。

この方法では、常に個々のノード（要素やドキュメントなど）を使用する必要があります。複数の項目をチェックする必要がある場合は、ループまたはイテレータメソッドを使用してください（以下のJSFiddleの例を参照してください）。

DOM（ドキュメントオブジェクトモデル）をツリーと考えてください。木には幹と枝があります。ルートはhtml要素です。そこからあなたは枝headとbodyを持っています。それらのそれぞれは、他の要素にさらに分岐します。各ブランチには、他の要素が含まれていてもいなくてもよい。特定のブランチ（個別にノードとして知られている）に他のノードが含まれている場合、それらをすぐに含むノードは、現在のノードの子ノードまたは子ノードと呼ばれます。それらの子ノード（それらの子、それらの子など）は、現在のノードの子孫として知られています。あなたが現在ここで、bodyノードを見ていた場合には、例えば、いくつかの収容するための識別、兄弟、および親/祖先ノードは、次のとおりです。ここ

html (parent of body and also an ancestor of body) 
    --> head (previous and prior sibling of body) 
    --> title 
    --> body (assume you are currently looking at this node) 
    --> header (this is a child and descendant of body) 
     --> div (this is a descendant of body) 
    --> section (this is a child and descendant of body) 
     --> div (this is a descendant of body) 
     --> p (this is a descendant of body) 
    --> p (this is a child and descendant of body) 
    --> span (this is a child and descendant of body) 
    --> footer (this is a child and descendant of body) 
     --> div (this is a descendant of body) 

は、私があなたに作業例を表示するために作成した例​​です。

フィドルが消えた場合は、ここではHTMLとJavaScriptは次のとおりです。

<div id="first"> 
    <span id="first-inner"></span> 
</div> 

<div id="second"> 
    <span id="second-inner"></span> 
</div> 

<div id="loop"> 
    <span id="loop-inner" class="check-loop"></span> 
</div> 

<span id="loop-outer" class="check-loop"></span> 

<div id="extra-messages"> 
</div> 

// Is #first-inner a descendant of #first? 
if(jQuery.contains(jQuery("#first").get(0), jQuery("#first-inner").get(0))) { 
    jQuery("#first-inner").text("Span with id 'first-inner' is a descendant of the div with id 'first'"); 
} else { 
    jQuery("#first-inner").text("Span with id 'first-inner' is NOT a descendant of the div with id 'first'"); 
} 

// Is #second-inner a descendant of #first? 
if(jQuery.contains(jQuery("#first").get(0), jQuery("#second-inner").get(0))) { 
    jQuery("#second-inner").text("Span with id 'second-inner' is a descendant of the div with id 'first'"); 
} else { 
    jQuery("#second-inner").text("Span with id 'second-inner' is NOT a descendant of the div with id 'first'"); 
} 

// Loop it! 
jQuery(".check-loop").each(function(idx, item){ 
    if(jQuery.contains(jQuery("#loop").get(0), item)) { 
    jQuery("#extra-messages").append(jQuery("<div>div</div>").text("Span with id '" + jQuery(item).attr("id") + "' is a descendant of the div with id 'loop'")); 
    } else { 
    jQuery("#extra-messages").append(jQuery("<div></div>").text("Span with id '" + jQuery(item).attr("id") + "' is NOT a descendant of the div with id 'loop'")); 
    } 
}); 

Answer 2

ネイティブのノードが包括contains方法があります。Node.contains()方法は を示すブール値を返します

をノードが所与のノードの子孫であるかどうか。ほとんどの詳細を無視

は、jQueryの排他的$.contains(a,b)は、それが

// Element contains another 
 
// Purposefully self-exclusive 
 
// As in, an element does not contain itself 
 
contains = hasCompare || rnative.test(docElem.contains) ? 
 
    function(a, b) { 
 
    var adown = a.nodeType === 9 ? a.documentElement : a, 
 
     bup = b && b.parentNode; 
 
    return a === bup || !!(bup && bup.nodeType === 1 && (
 
     adown.contains ? 
 
     adown.contains(bup) : 
 
     a.compareDocumentPosition && a.compareDocumentPosition(bup) & 16 
 
    )); 
 
    } : 
 
    function(a, b) { 
 
    if (b) { 
 
     while ((b = b.parentNode)) { 
 
     if (b === a) { 
 
      return true; 
 
     } 
 
     } 
 
    } 
 
    return false; 
 
    };