How do I get parent sibling and child elements using jquery selectors

  • 2020-03-30 02:57:16
  • OfStack

Get the parent element

1, the parent ([expr]) :

Gets all parent elements of the specified element
<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></div> 
<span id="par_span"> 
<a id="href_fiv" href="#">href_fiv</a> 

Firebug looks at jquery parent effects

Ii. Get the same level elements:

1, the next ([expr]) :
Gets the next sibling of the specified element.
<!DOCTYPE html> 
<script type="text/javascript" src="/jquery/jquery.js"></script> 

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

$('li.third-item').next().css('background-color', 'red'); 


The result of this example is that only the list item 4 background color changes to red

2, nextAll ([expr]) :

Gets all sibling elements following the specified element
<div><span>And Again</span></div> 
var p_nex = $("p").nextAll(); 

Watch out for the last one "< P>" The tag also has the name 'p_next_all' added to it

3, andSelf () :

Gets all siblings after the specified element, followed by the specified element

I think this function is the most interesting one. What does it mean? The literal translation is "and me," "and me," and, yes, me.
<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div> 
var p_nex = $("p").nextAll().andSelf(); 

Notice the first "< P>" Tag ah, this sentence means to select all the same level of tags after the p tag, as well as their own...

Instead of giving specific examples, next() and nextAll() are actually the opposite

Prev () : gets the previous sibling of the specified element.

5. PrevAll () : gets all the siblings in front of the specified element.

Get child elements

1, find the way of child elements 1: >

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

2. Find child element 2: children()

3, find the child element 3: find()

Here's a quick summary of the similarities and differences between children() and find() :

1 > Both the children and find methods are used to get the child elements of element, and neither returns a text node, as most jQuery methods do.
2 > The children method gets only the children of element one, immediate children.
3 > The find method gets all the subordinate elements, i.e., descendants of these elements in the DOM tree
4 > Children approach the parameters of the selector is optional (optionally), is used to filter the child elements,

But the find method's argument selector method is required.

5 > The find method can actually be implemented using jQuery(selector, context). The $(' li. Item - ii). The find (' li ') is equivalent to $(' li ', 'li. Item - ii).

Ex. :
<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> 
<li class="item-c">C</li> 
<li class="item-iii">III</li> 

Use: $(' ul. Level - 2.) the children (). The CSS (' border ', '1 px solid green'); The effect is:

Using the $(' ul. Level - 2). Find (" li "). The CSS (' border ', '1 px solid green'); The effect is:

Related articles: