jquery比較parent.parents.closest差別

jquery .parent .parents .closest 選擇元素的條件方法在使用上是有差別的。

比較 .parent() 與 .parents() .closest() 的差別：
.parent() 只往上查找一層
.parents() 往上查找不停止找出所有符合條件的
.closest() 往上查找只要找到符合條件的就停止

.parent()

定義和用法： .parent( selector ) ，( selector ) 字符串值，包含用於匹配元素的選擇器表達式。
.parent() 獲得當前匹配元素集合中每個元素的父元素，使用選擇器進行篩選是可選的。
.parent() 方法允許我們在 DOM 樹中搜索這些元素的父元素，並用匹配元素構造一個新的 jQuery 對象。

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
  <title>jQuery.parents</title>
  <script src="https://code.jquery.com/jquery.min.js"></script>
</head>

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

<script>
  $('li.item-a').parent().css('color', 'blue');
</script>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>jQuery.parents</title>

</head>

<body>

<li class="item-ii">II

<li class="item-b">B

</ul>

</li>

</ul>

</li>

</ul>

$('li.item-a').parent().css('color', 'blue');

</script>

</body>

</html>

See the Pen jquery比較parent.parents.closest差別 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

js bin展示開新視窗

.parents()

定義和用法： .parents( [selector] ) ，[selector]內如果有指定袓先元素對象的話，就只會到最外層的袓先元素對象就停止。如果都沒有指定對象的話 (空值)，就會一直套用到 html 層去…

.parents() 方法允許我們能夠在DOM樹中搜索到這些元素的祖先元素，從有序的向上匹配元素，並根據匹配的元素創建一個新的jQuery對象；返回的元素秩序是從離他們最近的父級元素開始的。當多個DOM元素在原有集合中，返回的集合將是原來元素以相反的順序排序，並且重複刪除。

（從裡到外的順序，依例來來看元素層級 SPAN > P > DIV > BODY > HTML ）

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>jQuery.parents-2</title>
<head>
  <style>
p, div, span {
	margin: 2px;
	padding: 1px;
}
div {
	border: 2px white solid;
}
span {
	cursor: pointer;
	font-size: 12px;
}
.selected {
	color: blue;
}
b {
	color: red;
	display: block;
	font-size: 14px;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.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*/;
	// .length 計算有包括的字串
  /*$("b").text("Unique div parents: " + len);*/
}
$("span").click(function () {
  $(this).toggleClass("selected");
	// toggleClass() 對設置或移除被選元素的一個或多個類進行切換。
	// span 點按後切換加減 .selected
  showParents();
});
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<title>jQuery.parents-2</title>

<head>

<style>

p, div, span {

margin: 2px;

padding: 1px;

}

div {

border: 2px white solid;

}

span {

cursor: pointer;

font-size: 12px;

}

.selected {

color: blue;

}

b {

color: red;

display: block;

font-size: 14px;

}

</style>

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

function showParents() {

$("div").css("border-color", "white");

var len = $("span.selected").parents("div").css("border", "2px red solid")/*.length*/;

// .length 計算有包括的字串

/*$("b").text("Unique div parents: " + len);*/

}

$("span").click(function () {

$(this).toggleClass("selected");

// toggleClass() 對設置或移除被選元素的一個或多個類進行切換。

// span 點按後切換加減 .selected

showParents();

});

</script>

</body>

</html>

See the Pen jquery比較parent.parents.closest差別-2 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

js bin展示開新視窗

資料來源：
jQuery 遍歷 – parent() 方法
 jQuery 遍歷 – parents() 方法
 .parents()
[jQuery] .parent() 與 .parents() 與 .closest() 的差異

標籤雲

.parent()

.parents()