• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • parents()

    获得集合中每个匹配元素的祖先元素,可以提供一个可选的选择器作为参数。

    .parents([selector ])
    • selector类型: Selector。一个选择器字符串,用于匹配元素的选择器表达式字符串。

    如果提供的jQuery代表了一组DOM元素,.parents()方法允许我们能够在DOM树中搜索到这些元素的祖先元素,从有序的向上匹配元素,并根据匹配的元素创建一个新的 jQuery 对象;返回的元素秩序是从离他们最近的父级元素开始的(注:从里到外的顺序)。当多个DOM元素在原有集合中,返回的集合将是原来元素以相反的顺序排序,并且重复删除。

    如果提供的jQuery代表了一组DOM元素,.parent()方法允许我们能够在DOM树中搜索到这些元素的父级元素,从有序的向上匹配元素,并根据匹配的元素创建一个新的 jQuery 对象。

    .parents().parent()方法是相似的,但后者只是进行了一个单级的DOM树查找(注:也就是只查找一层,直接的父元素,而不是更加上级的祖先元素)。此外,$("html").parent()方法返回一个包含document的集合,而$("html").parents()返回一个空集合。

    该方法还可以接受一个可选的选择器表达式,该选择器表达式可以是任何可传给$()函数的选择器表达式。如果提供了选择器表达式,那么会先测试该元素是否满足匹配的选择器表达式。

    考虑一个基本的嵌套列表页:

    <ul class="level-1">
      <li class="item-i">I</li>
      <li class="item-ii">II
        <ul class="level-2">
          <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>
    

    如果我们在项目A开始,我们可以找到它的祖先元素:

    $('li.item-a').parents().css('background-color', 'red');
    

    这段代码调用后的结果是:ul.level-2,li.item-ii和ul.level-1元素是红色背景(并在DOM树中向上遍历,直到<html>元素)。由于我们没有提供一个选择器表达式,所以所有的祖先元素都是返回的 jQuery 对象的一部分。如果我们提供了选择器,那么只有匹配该选择器的元素才会被包含在结果( jQuery 对象)中。

    例子

    查找每个 b 标签的所有父元素。

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      b, span, p, html body {
        padding: .5em;
        border: 1px solid;
      }
      b { color:blue; }
      strong { color:red; }
      </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <div>
        <p>
          <span>
            <b>My parents are: </b>
          </span>
        </p>
      </div>
    <script>
    var parentEls = $("b").parents()
                .map(function () {
                      return this.tagName;
                    })
                .get().join(", ");
    $("b").append("<strong>" + parentEls + "</strong>");
    </script>
     
    </body>
    </html>
    

    My parents are:

    点击元素,查找每个 span 标签的所有独一无二的 div 父元素。

    <!DOCTYPE html>
    <html>
    <head>
      <style>
     
      p, div, span {margin:2px; padding:1px; }
      div { border:2px white solid; }
      span { cursor:pointer; }
      .selected { color:blue; }
      b { color:red; display:block; font-size:1.1em; }
      </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <p>
        <div>
          <div><span>Hello</span></div>
          <span>Hello Again</span>
     
        </div>
        <div>
          <span>And Hello Again</span>
        </div>
      </p>
     
      <b>Click Hellos to toggle their parents.</b>
    <script>
    function showParents() {
      $("div").css("border-color", "white");
      var len = $("span.selected")
                       .parents("div")
                       .css("border", "2px red solid")
                       .length;
      $("b").text("Unique div parents: " + len);
    }
    $("span").click(function () {
      $(this).toggleClass("selected");
      showParents();
    });</script>
     
    </body>
    </html>
    

    Hello
    Hello Again
    And Hello Again

    Click Hellos to toggle their parents.

    上篇:parent()

    下篇:closest()