>jquery具有强大的选择器。其中siblings([expr])就是查找同辈元素。但有时没必要引入jquery库,那该如何做呢?
//取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
siblings([expr])
原生如何查找dom同辈元素
//el,要查找的dom元素
function sibilings(el){
//a, el的同胞元素集合
var a=[];
var p= el.previousSibling;
while (p) {
if(p.nodeType === 1){
a.push(p);
}
p= p.previousSibling;
}
a.reverse();
var n= el.nextSibling;
while (n){
if(n.nodeType === 1){
a.push(n);
}
n= n.nextSibling;
}
return a;
}
示例(点击dom激活样式)
-js
function sibling(domName){
var ul=document.querySelectorAll(domName);
ul.forEach(function(el,index){
el.onclick=function(e){
var sib=sibilings(this);
this.classList.add('active');
sib.forEach(function (el,index) {
el.classList.remove('active');
})
return this;
}
})
function sibilings(el){
var a=[];
var p= el.previousSibling;
while (p) {
if(p.nodeType === 1){
a.push(p);
}
p= p.previousSibling;
}
a.reverse();
var n= el.nextSibling;
while (n){
if(n.nodeType === 1){
a.push(n);
}
n= n.nextSibling;
}
return a;
}
}
sibling(".testul li")
-html
<div>
<ul class="testul">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
<ul class="testul">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</div>