Home >Web Front-end >JS Tutorial >Method instances of using jquery selectors to obtain parent elements, child elements, and sibling elements

Method instances of using jquery selectors to obtain parent elements, child elements, and sibling elements

伊谢尔伦Original: 2018-05-15 11:11:562900browse

1. Get parent elements

1. parent([expr]): Get all parent elements of the specified element

<p id="par_p"><a id="href_fir" href="#">href_fir</a> 
<a id="href_sec" href="#">href_sec</a> 
<a id="href_thr" href="#">href_thr</a></p> 
<span id="par_span"> 
<a id="href_fiv" href="#">href_fiv</a> 
</span> 
$(
document
).ready(function(){ 
$("a").parent().addClass(&#39;a_par&#39;); 
});

firebugView the effect of jquery parent

2. Get the sibling element:
1. next([expr]):
Get the next sibling element of the specified element (note that it is the next sibling Element)

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/
javascript
" src="/jquery/jquery.js"></script> 
</head> 
<body> 
<ul> 
<li>list item 1</li> 
<li>list item 2</li> 
<li class="third-item">list item 3</li> 
<li>list item 4</li> 
<li>list item 5</li> 
</ul> 
<script> 
$(&#39;li.third-item&#39;).next().css(&#39;
background-color
&#39;, &#39;red&#39;); 
</script> 
</body> 
</html>

The result of this example is that only the background color of list item 4 changes to red
2, nextAll([expr]):
Get all sibling elements behind the specified element

<p><span>And Again</span></p> 
var p_nex = $("p").nextAll(); 
p_nex.addClass(&#39;p_next_all&#39;);

Pay attention to the last "e388a4556c0f65e1904146cc1a846bee" tag, which is also added with the class name of 'p_next_all'~~
3. andSelf():
Get the content behind the specified element All sibling elements, followed by the specified element

<p>Hello</p><p>Hello Again</p><p><span>And Again</span></p> 
var p_nex = $("p").nextAll().andSelf(); 
p_nex.addClass(&#39;p_next_all&#39;);

Pay attention to the first "e388a4556c0f65e1904146cc1a846bee" tag. This sentence means to select all sibling tags after the p tag. , and myself. . .
The following two will not give specific examples. They are actually the opposite of next() and nextAll()
4. prev(): Get the previous sibling element of the specified element (the previous one) ).
5. prevAll(): Get all sibling elements in front of the specified element.
3. Obtain child elements
1. Search child elements method 1: >
For example: var aNods = $("ul > a"); Find all a tags under ul
2 , Find child elements method 2: children()
3. Find child elements method 3: find()
Here is a brief introduction to the following similarities and differences between children() and find():
1> children andfind methodBoth are used to obtain the subelements of element. Neither of them will return text node, just like most jQuery methods.
2> The children method only obtains the child elements below the element, namely: immediate children.
3> The find method obtains all subordinate elements, that is: descendants of these elements in the DOM tree
4> The parameter selector of the children method is optional (optionally), used to filter child elements,
But The parameter selector method of the find method is required.
5> The find method can actually be implemented by using jQuery(selector, context). That is, $('li.item-ii').find('li') is equivalent to $('li', 'li.item-ii').
Example:

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

Use: $ ('ul.level-2').children().css('border', '1px solid green');
Use $('ul.level-2').find('li').css ('border', '1px solid green').

The above is the detailed content of Method instances of using jquery selectors to obtain parent elements, child elements, and sibling elements. For more information, please follow other related articles on the PHP Chinese website!

jquery css firebug var dom 选择器 border ul li

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of usage examples of jQuery is() functionNext article：Detailed explanation of usage examples of jQuery is() function

See more

Method instances of using jquery selectors to obtain parent elements, child elements, and sibling elements

Related articles