jQuery父子节点遍历：parent()与children()函数深度解析与示例

2 年 ago
科, 颖
2 minutes

jQuery的parent()和children()树遍历函数示例

jQuery提供了许多用于获取父元素、子元素、兄弟元素、前一个和后一个元素的树遍历函数。我们将逐一研究每个jQuery树遍历方法——今天，我们重点探讨两个jQuery遍历方法：parent()和children()。

jQuery的parent()函数

jQuery的parent()方法用于获取所选HTML元素的直接父元素。一旦获取到父元素，您就可以对其执行所需的操作。以下是使用jQuery parent()的语法：

  • $("child").parent()

这将返回指定子元素的直接父元素。

  • $("child").parent("filter")

filter是作为参数传递给parent()方法的可选参数，用于进一步筛选父元素。

使用jQuery的parent()函数的示例

以下示例展示了parent()方法的使用。文件名为：jquery-parent.html

<!DOCTYPE html>
<html>
<head>
<title>jQuery 遍历父元素</title>

<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script>
$(document).ready(function(){
  $("h4").parent().css("background-color","yellow");
});
</script>
</head>
<body>

<span id="spanParent">Span 元素 - h4 元素的父元素
<h4>这是一个 h4 元素 - Span 的子元素。</h4>
</span>

</body>
</html>

在这个例子中，父元素是<span id="spanParent">，而子元素是<h4>。parent()方法用于获取直接父元素，即<span>元素，并将其背景颜色更改为黄色。parent()方法只遍历HTML DOM树的一级。可选参数提供了额外的过滤选项以缩小遍历范围。下面的图片显示了上述HTML页面生成的输出，可以看到<span>元素的背景颜色是黄色的。

jQuery的children()函数

使用jQuery的children()方法可以获取所选HTML元素的直接子元素。您可以使用children()方法遍历所选父元素的子元素。您可以使用此方法对子元素执行所需的操作，例如更改背景颜色、启用、禁用、隐藏、显示等。以下是使用jQuery children()函数的语法：

  • $("parentElement").children()

这是在不带任何参数的情况下使用。这将返回父元素的所有直接子元素。

  • $("parentElement").children("childElement")

parentElement和childElement可以是任何HTML元素。此方法将返回parentElement的所有匹配的childElement。childElement参数在此方法中是可选的，它提供了一个额外的过滤选项来获取子元素。

jQuery的children()函数示例

以下示例展示了children()方法的用法。文件名为：jquery-children.html

<html>
<head>
<title>jQuery 遍历子元素</title>

<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script>
$(document).ready(function(){
  // 以下代码将对所有 div 元素生效
  $("div").children("p").css("background-color","yellow");

  $("#spanParent").children("h4").css("background-color","green");
});
</script>
</head>
<body>

<div style="border:1px solid;">
<h3>h3 - div 的子元素</h3>
<p>p - div 的子元素</p>
<span>Span - div 的子元素</span>
<p>第二个 p - div 的子元素</p>
</div>
<p>p 元素 - 不是 div 的子元素</p>

<span id="spanParent">
<h4>这是一个 h4 元素 (Span 的子元素)。</h4>
</span>

</body>
</html>

在这个例子中，您可以看到两个父元素：<div style="border:1px solid;">和<span id="spanParent">。使用children()方法可以获取子元素并更改元素的颜色。我们使用children()方法返回父<div>元素的子元素<p>，并将所有这些<p>元素的背景颜色更改为黄色。请注意，位于<div>元素之外的<p>元素不会受到此方法的影响。同样，<span>元素具有子元素<h4>，我们在此示例中更改了该元素的背景颜色。children()方法只遍历HTML DOM树的一层。此方法不用于遍历文本节点。以下是上述HTML页面产生的输出。

这就是关于jQuery父子函数示例的所有内容，我们将在之后的帖子中介绍更多jQuery遍历方法。

bannerAds