jquery 遍历无限极树_jQuery parent（）和children（）树遍历函数示例
jquery 遍历无限极树
jQuery provides a lot of tree traversal functions that we can use to get the parent, child, siblings, previous and next elements. We will look into each of jQuery tree traversal methods one by one – today we will look into two of the jQuery traversal methods i.e parent() and children().
jQuery提供了许多树遍历功能，我们可以使用它们来获取父级，子级，同级，上一个和下一个元素。 我们将逐一研究每种jQuery树遍历方法-今天，我们将研究两种jQuery遍历方法，即parent()和children() 。
jQuery parent（）函数 (jQuery parent() function)
jQuery parent() method is used to get the direct parent element of the selected HTML element. You can perform desired actions on the parent element once it Is returned.
jQuery parent（）方法用于获取所选HTML元素的直接父元素。 返回父元素后，您可以对其执行所需的操作。
This is the syntax for using jQuery parent():
这是使用jQuery parent（）的语法：
- $(“child”).parent() $（“ child” ）.parent（）
This will return the direct parent of parent element
这将返回父元素的直接父元素
- $(“child”).parent(“filter”) $（“ 孩子” ）.parent（“过滤器”）
The filter is an optional parameter passed to the parent() method.
过滤器是传递给parent（）方法的可选参数。
jQuery parent（）函数示例 (jQuery parent() function example)
Following example demonstrates the parent() method usage.
下面的示例演示了parent（）方法的用法。
jquery-parent.html
jquery-parent.html
<!DOCTYPE html>
<html>
<head>
<title>jQuery Traversing Parent</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 Element - Parent of h4 element
<h4>This is an h4 element - child of Span.</h4>
</span>
</body>
</html>In this example, the parent element is <span id=”spanParent”> and <h4> is the child element. The parent() method is used to get the direct parent element which is the <span> element and changes the background color.
在此示例中，父元素是<span id =” spanParent”>，而<h4>是子元素。 parent（）方法用于获取直接父元素（即<span>元素）并更改背景颜色。
The parent() method traverses only one level up the HTM DOM tree. The optional parameters provide additional filtering options to narrow down the traversal.
parent（）方法仅遍历HTM DOM树的上一层。 可选参数提供其他过滤选项，以缩小遍历范围。
Below image shows the output produced by above HTML page, notice the background color of span element is yellow.
下图显示了以上HTML页面产生的输出，请注意span元素的背景颜色为黄色。
jQuery children（）函数 (jQuery children() function)
jQuery children() method is used to get the direct children of the selected HTML element. You can use children() method to traverse through the child elements of the selected parent element. You can perform desired actions on the child elements like changing the background color, enable, disable, hide, show etc by using this method.
jQuery children（）方法用于获取所选HTML元素的直接子级。 您可以使用children（）方法遍历所选父元素的子元素。 您可以使用此方法对子元素执行所需的操作，例如更改背景颜色，启用，禁用，隐藏，显示等。
This is the syntax for using jQuery children() function:
这是使用jQuery children（）函数的语法：
- $(“parentElement”).children() $（“ parentElement” ）.children（）
This is used without any parameters. This is used return all the direct children of the parentElement.
无需任何参数即可使用。 这用于返回parentElement的所有直接子级。
- $(“parentElement”).children(“childElement”) $（“ parentElement” ）.children（“ childElement” ）
parentElement and childElement could be any HTML element .This will return all the matched childElement of the parentElement. The parameter, childElement in this method is optional, which provides an additional filtering option to get the child elements.
parentElement和childElement可以是任何HTML元素。这将返回parentElement的所有匹配的childElement 。 此方法中的参数childElement 是可选的，它提供了一个附加的过滤选项来获取子元素。
jQuery children（）函数示例 (jQuery children() function example)
Following example demonstrates the children() method usage.
下面的示例演示了children（）方法的用法。
jquery-children.html
jquery-children.html
<html>
<head>
<title>jQuery Traversing Children</title>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script>
$(document).ready(function(){
//below code will run for all divs
$("div").children("p").css("background-color","yellow");
$("#spanParent").children("h4").css("background-color","green");
});
</script>
</head>
<body>
<div style="border:1px solid;">
<h3>h3 - Child of div</h3>
<p> p -Child of div</p>
<span> Span - Child of Div</span>
<p>Second p - Child of div</p>
</div>
<p> p element - Not a child of div</p>
<span id="spanParent">
<h4>This is an h4 element (child of Span).</h4>
</span>
</body>
</html>In this example, you can see two parent elements: <div id=”divParent”> and <span id=”spanParent”>. The children() method is used to get the child elements and change the color of the element. We use children method to return the child element <p> of the parent <div> element and change the color of all child <p> elements to yellow. Notice the p element outside the div element is not altered by this method. Likewise, span element has child element h4 and we change the color of that element in this example.
在此示例中，您可以看到两个父元素：<div id =” divParent”>和<span id =“ spanParent”>。 children（）方法用于获取子元素并更改元素的颜色。 我们使用children方法返回父<div>元素的子元素<p>并将所有子<p>元素的颜色更改为黄色。 注意，此方法不会更改div元素外部的p元素。 同样，span元素具有子元素h4，在此示例中，我们更改了该元素的颜色。
The children method traverses only one level down the HTM DOM tree. This method is not used to traverse through the text nodes.
子方法仅向下遍历HTM DOM树的下一级。 此方法不用于遍历文本节点。
Below is the output produced by the above HTML page.
以下是上述HTML页面产生的输出。
That’s all for jQuery parent and children function examples, we will look into more jQuery traversal methods in coming posts.
jQuery父子函数示例就这些了，我们将在以后的文章中探讨更多jQuery遍历方法。
翻译自: https://www.journaldev.com/5238/jquery-parent-and-children-tree-traversal-functions-example
jquery 遍历无限极树