jquery parent () parents () closest () difference

Parent is the first parent of the current element, and no match will continue to look down

Parents is to find all the parent nodes of the current element

Closest () is to find all the parent nodes of the current element until the first matching parent node is found

There are similarities and differences between the parent (), parents () and closest () method 22, and this article briefly distinguishes these three methods. With this content, you will not be able to use the. Parent (), parents (), and closest () at a later time.

Let's take a look at examples to illustrate the differences in the use of these three methods:

1 <ul id="menu" style="width:100px; ">2      <li>3          <ul>4              <li> <a href="  #">Home</a> </li>5          </ul>6      < /li>7      <li>End</li>8  

Next, take a look at these three methods:

1<script type="Text/javascript">2     //When you click Home3$("#menu a"). Click (function () {4$( This). Parent ("ul"). CSS ("background","Yellow");//05$( This). Parent ("Li"). Parent ("ul"). CSS ("background","Yellow");//16$( This). Parents ("ul"). CSS ("background","Yellow");//27$( This). Closest ("ul"). CSS ("background","Yellow");//3 return false;8      });9</script>

The 1.parent () method looks from the immediate parent node of the specified type, and the direct parent node in "0" is <li> so the <ul> parent node is not found here,<a>. <li> was found in "2", then <ul> was found, and its background color was set to yellow. Parent () returns a node.

The 2.parents () method looks similar to the parent () method, except that when it finds the first parent node, it does not stop looking, but continues to find, and finally returns multiple parent nodes, such as "2", so that the entire background color of the UL whose ID is menu becomes yellow.

The 3.closest () method looks up from the node that contains itself, and it is similar to parents (), except that it returns only one node, as in "3", and implements the same function as 1. However, it reduces the amount of code, and returns only a single node compared to "2". As can be seen, the closest () method is used more frequently in projects.

jquery parent () parents () closest () difference