jQuery中parent()、parents()、parentsUntil()三个方法的区别

parent()
Get the ancestors(祖上) of each element in the current set of matched elements, optionally filtered by a selector.
获取当前设置匹配元素的祖上素集合，有选项性的过滤一个选择器;




<div><p>Hello1</p></div><p>Hello2</p>
$("p").parent()
结果：匹配当前元素最直接父元素集合,一个是body元素另一个是div元素;




<div><p>Hello1</p><p>Hello2</p></div>
$("p").parent()
结果：匹配当前元素最直接父元素是div元素,这里只匹配到一个，二个p被包含在同一个父元素下；


有选项性的过滤一个选择器
<div class='div'>
<div class='div'>
    <p>Hello1</p>
    <p>Hello2</p>
  </div>
</div>
<p>Hello2</p>


$("p").parent("div")
结果：返回p元素最直接父元素合集，这里只匹配到一个

parents()
Get the ancestors(祖上) of each element in the current set of matched elements, optionally filtered by a selector.
获取当前设置匹配元素的祖上素集合，有选项性的过滤一个选择器;


<div><p>Hello1</p><p>Hello2</p></div>
$("p").parents()


console.log($( "p" ).parents().css( "background-color", "red" ));
集合的顺序是div、body、html; 不包含根元素document


<div class="item">
  <div class="item">
    <p>Hello1</p>
    <p class="item">Hello2</p>
  </div>
</div>


console.log($("p").parents(".item").css( "background-color", "red" ));
匹配多个div.item选择器的元素




parentsUntil()
查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，返回不包括匹配的元素父元素合集


<ul class="level-1 yes">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2 yes">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>


$( "li.item-a" )
  .parentsUntil( ".level-1" )
    .css( "background-color", "red" );
匹配到了<li class="item-ii">II


$( "li.item-2" )
  .parentsUntil( $( "ul.level-1" ), ".yes" )
    .css( "border", "3px solid green" );
匹配到了<ul class="level-2 yes">