69pao国产精品视频-久久精品一区二区二三区-精品国产精品亚洲一本大道-99国产综合一区久久

jQuery 遍歷 parents() 方法

jQuery 遍歷 parents() 方法

jQuery 參考手冊(cè) 遍歷jQuery 參考手冊(cè) 遍歷

parents() 獲得當(dāng)前匹配元素集合中每個(gè)元素的祖先元素，使用選擇器進(jìn)行篩選是可選的。

 

1. 語法

.parents(selector)
參數(shù) 描述
selector 字符串值，包含用于匹配元素的選擇器表達(dá)式。

如果給定一個(gè)表示 DOM 元素集合的 jQuery 對(duì)象，.parents() 方法允許我們?cè)?DOM 樹中搜索這些元素的祖先元素，并用從最近的父元素向上的順序排列的匹配元素構(gòu)造一個(gè)新的 jQuery 對(duì)象。元素是按照從最近的父元素向外的順序被返回的。.parents() 和 .parent() 方法類似，不同的是后者沿 DOM 樹向上遍歷單一層級(jí)。

該方法接受可選的選擇器表達(dá)式，與我們向 $() 函數(shù)中傳遞的參數(shù)類型相同。如果應(yīng)用這個(gè)選擇器，則將通過檢測(cè)元素是否匹配該選擇器對(duì)元素進(jìn)行篩選。

請(qǐng)思考這個(gè)帶有基本的嵌套列表的頁(yè)面：

<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>

如果我們從項(xiàng)目 A 開始，則可找到其祖先元素：

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

此次調(diào)用的結(jié)果是，level-2 列表、項(xiàng)目 II 以及 level-1 列表等元素（沿 DOM 樹一路向上直到 <html>）設(shè)置紅色背景。由于我們未應(yīng)用選擇器表達(dá)式，父元素很自然地成為了對(duì)象的一部分。如果已應(yīng)用選擇器，則會(huì)在包含元素之前，檢測(cè)元素是否匹配選擇器。由于我們未應(yīng)用選擇器表達(dá)式，所有祖先元素都是返回的 jQuery 對(duì)象的組成部分。如果已應(yīng)用選擇器，則只會(huì)包含其中的匹配項(xiàng)目。

 

2. 范例

查找每個(gè) b 元素的所有父元素：

$("b").parents()

jQuery 參考手冊(cè) 遍歷jQuery 參考手冊(cè) 遍歷

下一節(jié)：jQuery 遍歷 parentsUntil() 方法

jQuery 教程

相關(guān)文章