jQuery遍歷之parents()方法

jQuery是個合集對象,如果想快速找出合集裡面的每一個元素的所有祖輩元素,此時可以用parents()方法

其實也類似find與children的區別,parent只會找一級,parents會往上一直查到查找到祖先節點

理解節點查找關係:

<div class="div">
   <ul class ="son">
       <li class="grandson">1</li>
   </ul>
</div>

在在li節點上找到祖輩元素div, 這裡可以用$("li").parents()方法

parents()無參數

parents()方法允許我們能夠在DOM樹中搜尋到這些元素的祖先元素,從有序的向上匹配元素,並根據匹配的元素創建一個新的jQuery 物件;

返回的元素秩序是從離他們最近的父級元素開始的

注意:jQuery是個合集對象,所以透過parent是配對合集中所有元素的祖先元素

         parents()方法選擇性地接受相同類型選擇器表達式

        同樣的也是因為jQuery是集合對象,可能需要對這個合集對象進行一定的篩選,找出目標元素,所以允許傳一個選擇器的表達式

注意事項:

    1 .parents()和.parent()方法是相似的,但後者只是進行了一個單級的DOM樹查找
    2  $( "html" ).parent()方法返回一個包含document的集合,而$( "html" ).parents()傳回一個空集合。

#下面我們來看一段程式碼:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <div>php.cn
        <ul>php
          <li>php 中文网</li>
          <li>php 中文网</li>
        </ul>
    </div>
<script>
    $("li").parents().css('color','red');
</script>

</body>
</html>
繼續學習
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <div>php.cn <ul>php <li>php 中文网</li> <li>php 中文网</li> </ul> </div> <script> $("li").parents().css('color','red'); </script> </body> </html>