search

Home  >  Article  >  Web Front-end  >  Briefly describe the differences and connections between next, nextAll, nextUntil, and siblings in jquery

Briefly describe the differences and connections between next, nextAll, nextUntil, and siblings in jquery

巴扎黑
巴扎黑Original
2017-06-22 14:07:181576browse

In this article, I will introduce the difference between siblings in detailjquery next nextAll nextUntil siblings. Interested friends can refer to

next: an element next to $('')

nextAll: All sibling elements after $('')

nextUntil: until. . . It means before, so it means all sibling elements after $(''), but before the nextUntil parameter, excluding the matching element itself

sibings: All sibling elements before and after $('')

The simple understanding is that next is to find his younger brother/sister, nextAll is to find all his younger brothers/sisters, nextUntil is to find younger brothers/sisters who are a certain age younger than him, siblings is to find all his brothers/ Sister, and all his brothers/sisters. So the same peer relationship, prev, prevAll, prevUntil

The following is a simple test code

The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
<title>
Document
</title> 
<script type=&#39;text/
javascript
&#39; src=&#39;http://code.jquery.com/jquery-1.9.1.min.js&#39;></script> 
</head> 
<body> 
<p class="first"> 
<a href="#">hhh</a> 
<h1>这是一个标题</h1> 
<p>这是一个test</p> 
<p>这是一个test</p> 
<p>这是一个test</p> 
<p>这是一个test</p> 
<p>hhha</p> 
<p>这是一个test</p> 
<p>这是一个test</p> 
</p> 
<script> 
$(function(){ 
//$(&#39;p
:first
&#39;).next().css(&#39;
background
&#39;,&#39;red&#39;); 
//$(&#39;p:first&#39;).nextAll().css(&#39;background&#39;,&#39;yellow&#39;); 
//$(&#39;p:first&#39;).nextUntil(&#39;p&#39;).css({&#39;
font-size
&#39;:20,background:&#39;red&#39;}); 
//$(&#39;p:first&#39;).siblings().css(&#39;background&#39;,&#39;yellow&#39;); 
}); 
</script> 
</body> 
</html>


The above is the detailed content of Briefly describe the differences and connections between next, nextAll, nextUntil, and siblings in jquery. For more information, please follow other related articles on the PHP Chinese website!

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 simple questions about parent() and siblings() in jQueryNext article：Detailed explanation of simple questions about parent() and siblings() in jQuery

Related articles

See more