Space in the jquery selector and greater than sign & gt;, plus sign + and Tilde ~ Jquery Selector

Space and greater than sign in the jquery selector>, plus sign +, and Tilde ~ Jquery Selector

Concept

Space: $ ('parent childchild ') indicates getting all childchild nodes in the parent.
Greater than: $ ('parent> childchild ') indicates obtaining all the next childchild of the parent

Plus sign: $ ('pre + nextbrother ') indicates to obtain the next sibling node of the pre node, which is equivalent to the next () method.

Tilde: $ ('pre ~ Brother ') indicates to obtain all the sibling nodes after the pre node, which is equivalent to the nextAll () method.

Detailed description

The existing code is as follows:

<meta charset="utf-8"> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <div id="imgs_box">   <ul class="play_imgs_width imgs_source">     <li><a href="javascript:;"></a></li>     <li><a href="javascript:;"></a></li>     <li><a href="javascript:;"></a></li>   </ul>   <ul class="imgs_buttons play_imgs_width">     <li><a href="" class="buttons_ahover">1</a></li>     <li><a href="" class="buttons_default">2</a></li>     <li><a href="" class="buttons_default">3</a></li>   </ul>    <ul class="test">     <li>       <ul class="test_first_child">         <li></li>         <li></li>         <li></li>         <li></li>       </ul>     </li>   </ul>  </div> 

Space usage

To obtain all the tags in imgs_box, use spaces. The Code is as follows:

// Obtain all elements in imgs_box $ (function () {$ ('# imgs_box '). each (function () {console. log (this );});});

The result is as follows: all elements are obtained.

Usage of big Yu Codes

If you want all ul elements at the lower-level in imgs_box and do not contain elements whose class is test_first_child, you can use the following code:

$(function(){   $('#imgs_box > ul').each(function(){     console.log(this);   }); }); 

Use of the plus sign

To obtain the next adjacent element of the class imgs_source, use the plus sign. The Code is as follows:

$(function(){   $('.imgs_source + ul').each(function(){     console.log(this);   }); }); 

Use of Tilde

If you want to obtain all the same-level elements of the imgs_source element, you can use the Tilde ~. The Code is as follows:

$(function(){   $('.imgs_source ~ ul').each(function(){     console.log(this);   }); }); 

The preceding section describes the space and greater than signs in the jquery selector, plus signs, and Tilde ~ I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!