首頁 >web前端 >js教程 >如何用 parent() 方法取得某個元素的父元素？ parent() 方法案例詳解

如何用 parent() 方法取得某個元素的父元素？ parent() 方法案例詳解

伊谢尔伦原創: 2017-06-17 10:38:313998瀏覽

定義和用法

parent() 取得目前符合元素集合中每個元素的父元素，使用選擇器進行篩選是可選的。

.parent(selector)

selector：字串值，包含用於匹配元素的選擇器表達式。

語法結構:

$(":parent")

此選擇器一般也要和其他選擇器搭配使用，例如類別選擇器和元素選擇器等等。例如:

$("div:parent").animate({width:"300px"})

以上程式碼能夠將含有文字或元素的div的寬度設定為300px。
如果不和其他選擇器配合使用，則預設狀態是和*選擇器一起使用，例如$(":parent")等同於$("*:parent")。

詳細說明

如果給定一個表示DOM 元素集合的jQuery 對象，.parent() 方法允許我們在DOM 樹中搜尋這些元素的父元素，並用匹配元素建構一個新的jQuery 物件。 .parents() 和 .parent() 方法類似，不同的是後者沿著 DOM 樹向上遍歷單一層級。

此方法接受可選的選擇器表達式，與我們向 $() 函數中傳遞的參數類型相同。如果應用這個選擇器，則將透過偵測元素是否符合該選擇器對元素進行篩選。

實例

查找每個段落的"selected" 類別的父元素：

$("p").parent(".selected")

請思考這個帶有基本的嵌套列表的頁面：

<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 開始，則可找到其父元素：

$(&#39;li.item-a&#39;).parent().css(&#39;background-color&#39;, &#39;red&#39;);

這次呼叫的結果是，為level-2 清單設定紅色背景。由於我們未應用選擇器表達式，父元素自然地成為了物件的一部分。如果已套用選擇器，則會在包含元素之前，請偵測元素是否符合選擇器。

範例一程式碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php.cn</title>
<style type="text/css">
div{
list-style-type:none;
width:150px;
height:30px;
border:1px solid red;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div:parent").animate({width:"300px"})
})
})
</script>
</head>
<body>
<div>我是文本</div>
<div></div>
<button>点击查看效果</button>
</body>
</html>

範例2：

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php.cn</title>
<style type="text/css">
div{
list-style-type:none;
width:150px;
height:30px;
border:1px solid red;
}
span{border:1px solid green;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("*:parent").animate({width:"300px"})
})
})
</script>
</head>
<body>
<div>我是文本</div>
<div></div>
<span>大家好</span>
<button>点击查看效果</button>
</body>
</html>

由於上述程式碼並沒有指定與:parent選擇器相符使用的選擇器，所以就預設和*選擇器配合使用，於是程式碼能夠將含有文字和元素的元素的寬度以自訂動畫方式設定為300px。

以上是如何用 parent() 方法取得某個元素的父元素？ parent() 方法案例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：分析用JS如何對iframe父子（內外）頁面進行操作？下一篇：分析用JS如何對iframe父子（內外）頁面進行操作？

看更多