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方法查找第二个参数，使其成为第一个参数的子级或后代。虽然第一个参数NEEDS是一个DOM对象，如Element或Document类型，但如果第二个参数也不是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)

以下是我创建的示例JSFiddle，以向您展示一个有效的示例。

如果小提琴消失，这里是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)只是

a.contains(b.parentNode);

更具体地说，它被定义为

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

$ .contains（）jquery函数如何工作？

2 个答案: