Siblings have the same parent element; jquery sibling traversal is to use jQuery to traverse the DOM tree to obtain the sibling elements of the specified element. There are 7 sibling traversal methods: 1. siblings(), which can obtain all elements of the same level of the specified element; 2. next(), which can obtain the next sibling element of the element; 3. nextAll(); 4. nextUntil(); 5. prev(), which can obtain the upper-level sibling elements of the element; 6. prevAll(); 7. prevUntil().
The operating environment of this tutorial: windows7 system, jquery3.6 version, Dell G3 computer.
Sibling traversal in jquery
Siblings have the same parent element.
JQuery can traverse the sibling elements of an element in the DOM tree.
Sibling traversal method
In jquery, there are generally seven methods for querying sibling elements: siblings(), next(), nextAll(), nextUntil(), prev(), prevAll(), prevUntil()
siblings() method, mainly used to obtain all elements of the siblings of the specified element
The next() method is mainly used to obtain the next sibling element of the specified element
nextAll() method is mainly used to obtain all the elements of the next sibling element of the specified element
nextUntil() method is mainly used to obtain the next sibling element of the specified element. This sibling element must be the element between the specified element and the element set by the nextUntil() method
prev() method, mainly used to obtain the upper level sibling elements of the specified element
prevAll() method, mainly used to obtain the upper level of the specified element All sibling elements
The prevUntil() method is mainly used to obtain the previous sibling element of the specified element. This sibling element must be between the specified element and the element set by the prevUntil() method. Between the elements
we simulate these processes through the code below. In fact, jQuery handles it this way, but it is more rigorous in structure and filtering.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script>
<script src="js/jquery-3.6.3.min.js"></script>
<title></title>
</head>
<body>
<button id="test1">jQuery遍历同胞</button>
<button id="test2">模拟遍历同胞</button>
<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>
<script type="text/javascript">
function dir(elem, dir, until) {
var matched = [],
truncate = until !== undefined;
while ((elem = elem[dir]) && elem.nodeType !== 9) {
if (elem.nodeType === 1) {
if (truncate) {
if (elem.nodeName.toLowerCase() == until || elem.className == until ) {//细节：元素的className不止一个；
// 添加过滤id？
break;
}
}
matched.push(elem);
}
}
return matched;
}
function nextAll(elem) {
return dir(elem, "nextSibling");
}
function prevAll(elem) {
return dir(elem, "previousSibling");
}
function nextUntil(elem, until) {
return dir(elem, "nextSibling", until);
}
function prevUntil(elem, until) {
return dir(elem, "previousSibling", until);
}
$("#test1").click(function(){
var item = $('li.item-ii');
alert(item.nextAll()[0].className)
alert(item.prevAll()[0].className)
alert(item.nextUntil('.end')[0].className)
alert(item.prevUntil('.first')[0].className)
})
$("#test2").click(function(){
var item = document.querySelectorAll('li.item-ii')[0]
alert(nextAll(item)[0].className)
alert(prevAll(item)[0].className)
alert(nextUntil(item, '.end')[0].className)//.end表示是同胞的最后一个元素？
alert(prevUntil(item, '.first')[0].className)
})
</script>
</body>
</html>How does jquery detect whether there are sibling elements
Checking method:
1. Use siblings() to get all sibling elements of the specified element
指定元素.siblings()
will return a jquery object containing sibling elements.
2. Use the length attribute to get the length of the jquery object
The length obtained by the length attribute is the number of sibling elements
jquery对象.length==0
If the number of sibling elements is 0, there are no sibling elements
If the number is not equal to 0, there are sibling elements
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.siblings,.siblings *{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
var len=$("h2").siblings().length;
if(len==0){
console.log("h2没有同胞元素");
}else{
console.log("h2有同胞元素，其个数为："+len);
}
});
});
</script>
</head>
<body>
<div class="siblings">div (父)
<p>p（兄弟元素）</p>
<span>span（兄弟元素）</span>
<h2 id="h-本元素">h2（本元素）</h2>
<h3 id="h-兄弟元素">h3（兄弟元素）</h3>
<p>p（兄弟元素）</p>
</div>
<button>检测h2是否有同胞元素</button>
</body>
</html>
[Recommended learning: jQuery video tutorial, web front-end video]
The above is the detailed content of what is jquery sibling traversal. For more information, please follow other related articles on the PHP Chinese website!
CSS: Can I use multiple IDs in the same DOM?May 14, 2025 am 12:20 AMNo,youshouldn'tusemultipleIDsinthesameDOM.1)IDsmustbeuniqueperHTMLspecification,andusingduplicatescancauseinconsistentbrowserbehavior.2)Useclassesforstylingmultipleelements,attributeselectorsfortargetingbyattributes,anddescendantselectorsforstructure
The Aims of HTML5: Creating a More Powerful and Accessible WebMay 14, 2025 am 12:18 AMHTML5aimstoenhancewebcapabilities,makingitmoredynamic,interactive,andaccessible.1)Itsupportsmultimediaelementslikeand,eliminatingtheneedforplugins.2)Semanticelementsimproveaccessibilityandcodereadability.3)Featureslikeenablepowerful,responsivewebappl
Significant Goals of HTML5: Enhancing Web Development and User ExperienceMay 14, 2025 am 12:18 AMHTML5aimstoenhancewebdevelopmentanduserexperiencethroughsemanticstructure,multimediaintegration,andperformanceimprovements.1)Semanticelementslike,,,andimprovereadabilityandaccessibility.2)andtagsallowseamlessmultimediaembeddingwithoutplugins.3)Featur
HTML5: Is it secure?May 14, 2025 am 12:15 AMHTML5isnotinherentlyinsecure,butitsfeaturescanleadtosecurityrisksifmisusedorimproperlyimplemented.1)Usethesandboxattributeiniframestocontrolembeddedcontentandpreventvulnerabilitieslikeclickjacking.2)AvoidstoringsensitivedatainWebStorageduetoitsaccess
HTML5 goals in comparison with older HTML versionsMay 14, 2025 am 12:14 AMHTML5aimedtoenhancewebdevelopmentbyintroducingsemanticelements,nativemultimediasupport,improvedformelements,andofflinecapabilities,contrastingwiththelimitationsofHTML4andXHTML.1)Itintroducedsemantictagslike,,,improvingstructureandSEO.2)Nativeaudioand
CSS: Is it bad to use ID selector?May 13, 2025 am 12:14 AMUsing ID selectors is not inherently bad in CSS, but should be used with caution. 1) ID selector is suitable for unique elements or JavaScript hooks. 2) For general styles, class selectors should be used as they are more flexible and maintainable. By balancing the use of ID and class, a more robust and efficient CSS architecture can be implemented.
HTML5: Goals in 2024May 13, 2025 am 12:13 AMHTML5'sgoalsin2024focusonrefinementandoptimization,notnewfeatures.1)Enhanceperformanceandefficiencythroughoptimizedrendering.2)Improveaccessibilitywithrefinedattributesandelements.3)Addresssecurityconcerns,particularlyXSS,withwiderCSPadoption.4)Ensur
What are the main areas where HTML5 tried to improve?May 13, 2025 am 12:12 AMHTML5aimedtoimprovewebdevelopmentinfourkeyareas:1)Multimediasupport,2)Semanticstructure,3)Formcapabilities,and4)Offlineandstorageoptions.1)HTML5introducedandelements,simplifyingmediaembeddingandenhancinguserexperience.2)Newsemanticelementslikeandimpr
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
SublimeText3 Chinese version
Chinese version, very easy to use
WebStorm Mac version
Useful JavaScript development tools
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver Mac version
Visual web development tools
