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
Firebug looks at jquery parent effects
Ii. Get the same level elements:
1, the next ([expr]) :
Gets the next sibling of the specified element.
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
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.
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. :
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:
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>
</span>
$(document).ready(function(){
$("a").parent().addClass('a_par');
});
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>
<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 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();
p_nex.addClass('p_next_all');
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();
p_nex.addClass('p_next_all');
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>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
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: