javascript - How $.contains() jquery function Works? -

i'm new jquery , don't know how $.contains() works in jquery.. tried code , know gives boolean value don't know how works exactly..

html:

<div> <span>mm</span> </div> 

jquery code:

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

can explain...

the contains jquery method looks second argument child or descendant of first argument. while first arguments needs dom object such element or document type, have noticed unexpected behavior if second argument not dom object (like passing in jquery collection).

you should stick using individual nodes (like element or document) method. if need check multiple items, use loop or iterator method (see jsfiddle example below).

think of dom (document object model) tree. tree has stem , branches. root html element. there have branches head , body. each of branch further other elements. each branch may or may not contain other elements. if particular branch (known individually node) contains other nodes, contained nodes known children or child nodes of current node looking at. child nodes any children of them (as children of them, children of them, , on) known descendants of current node. instance, if looking @ body node, here identifications containing, sibling, , parent/ancestor nodes:

html (parent of body , ancestor of body)   --> head (previous , prior sibling of body)     --> title   --> body (assume looking @ node)     --> header (this child , descendant of body)       --> div (this descendant of body)     --> section (this child , descendant of body)       --> div (this descendant of body)         --> p (this descendant of body)     --> p (this child , descendant of body)     --> span (this child , descendant of body)     --> footer (this child , descendant of body)       --> div (this descendant of body) 

here example jsfiddle created show working example.

in case fiddle disappears, here 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> 

// #first-inner descendant of #first? if( jquery.contains(jquery("#first").get(0), jquery("#first-inner").get(0)) ) {     jquery("#first-inner").text("span id 'first-inner' descendant of div id 'first'"); } else {     jquery("#first-inner").text("span id 'first-inner' not descendant of div id 'first'"); }  // #second-inner descendant of #first? if( jquery.contains( jquery("#first").get(0), jquery("#second-inner").get(0) ) ) {     jquery("#second-inner").text("span id 'second-inner' descendant of div id 'first'"); } else {     jquery("#second-inner").text("span id 'second-inner' not descendant of div 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 id '" + jquery(item).attr("id") + "' descendant of div id 'loop'"));   } else {     jquery("#extra-messages").append( jquery("<div></div>").text("span id '" + jquery(item).attr("id") + "' not descendant of div id 'loop'") );   } });