How to get parent elements, sibling elements, and child elements using jquery selector

Home

Web Front-end

JS Tutorial

How to get parent elements, sibling elements, and child elements using jquery selector_jquery

May 16, 2016 pm 04:48 PM

Selector

1. Get the parent element

1. parent([expr]):

Get all parent elements of the specified element

Copy the code The code is as follows:

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

firebug view jquery parent effect

2. Get sibling elements:

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

Copy code The code is as follows:

 
<!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> 
$('li.third-item').next().css('background-color', 'red'); 
</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 after the specified element

Copy code The code is as follows:

 
<div><span>And Again</span></div> 
var p_nex = $("p").nextAll(); 
p_nex.addClass('p_next_all'); 

Pay attention to the last "<p>" tag, the class name 'p_next_all' is also added~~

3. andSelf():

Gets all the sibling elements behind the specified element, and then adds the specified element

I think this function is the most interesting one. What does it mean? ? The literal translation is "and I", "and myself", yes, there is still myself.

Copy code The code is as follows:

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

Pay attention to the first "<p>" tag. This sentence means to select all sibling tags after the p tag, as well as itself. . .

The following two will not give specific examples. They are actually the opposite of next() and nextAll()

4. prev(): Get the previous sibling of the specified element Element (the previous one).

5. prevAll(): Get all sibling elements in front of the specified element.

3. Get sub-elements

1. Search sub-element method 1: >

For example: var aNods = $("ul > a"); Find ul All a tags under

2. Method 2 to find child elements: children()

3. Method 3 to find child elements: find()

Here we briefly introduce the following Similarities and differences between children() and find():

1> The children and find methods are both used to obtain the child elements of element. Both will not return text node, just like most jQuery methods. Same.
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) and is 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:

Copy code The code is as follows:

 
<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'); The effect is:

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

Statement of this Website

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