问题
What is the perfect way to find all nextSiblings and previousSiblings in javascript. I tried few ways but not getting accurate solution. if any element is selected, I need to get length of all next siblings excluding white-space, any spaces or line-breaks
Also I don't want to use jquery for this, i specifically looking something from java script
Please advice
回答1:
I'll assume that this takes place inside an event handler where this is a reference to the targeted element whose siblings you want to affect.
If not, adjustments will be needed.
var result = [],
node = this.parentNode.firstChild;
while ( node ) {
if ( node !== this && node.nodeType === Node.ELEMENT_NODE )
result.push( node );
node = node.nextElementSibling || node.nextSibling;
}
// result will contain all type 1 siblings of "this"
回答2:
This is a bit more winded of a solution but allows you to create a filter on how you get siblings.
There are three functions to get only previous, only next, or all. This could be improved but decent starting point if you need more control on what types of siblings you want to collect. Thought it might be worth adding.
Working Example
get all next siblings
//this will start from the current element and get all of the next siblings
function getNextSiblings(elem, filter) {
var sibs = [];
while (elem = elem.nextSibling) {
if (elem.nodeType === 3) continue; // text node
if (!filter || filter(elem)) sibs.push(elem);
}
return sibs;
}
get all previous siblings
//this will start from the current element and get all the previous siblings
function getPreviousSiblings(elem, filter) {
var sibs = [];
while (elem = elem.previousSibling) {
if (elem.nodeType === 3) continue; // text node
if (!filter || filter(elem)) sibs.push(elem);
}
return sibs;
}
get all siblings
//this will start from the first child of the current element's parent and get all the siblings
function getAllSiblings(elem, filter) {
var sibs = [];
elem = elem.parentNode.firstChild;
do {
if (elem.nodeType === 3) continue; // text node
if (!filter || filter(elem)) sibs.push(elem);
} while (elem = elem.nextSibling)
return sibs;
}
example filter to apply to above functions
// Example filter only counts divs and spans but could be made more complex
function exampleFilter(elem) {
switch (elem.nodeName.toUpperCase()) {
case 'DIV':
return true;
case 'SPAN':
return true;
default:
return false;
}
}
HTML and testing output
HTML
<div id='test'>
<div id='test2'>asdf</div>
<br /> sdf
<div>asdfasdf<span>asdf</span></div>
<div>a</div>
<span>a</span>
<br />
<div>d</div>
<hr/>
</div>
JavaScript
var elem;
elem = document.getElementById('test2');
//with filter alerts 4
alert( getNextSiblings( elem, exampleFilter ).length );
// no filter, alerts 7
elem = document.getElementById('test2');// put elem back to what it was
alert( getNextSiblings( elem ).length );
// alerts 0
elem = document.getElementById('test2');// put elem back to what it was
alert( getPreviousSiblings( elem, exampleFilter ).length );
// alerts 5
elem = document.getElementById('test2');// put elem back to what it was
alert( getAllSiblings( elem, exampleFilter ).length );
回答3:
Here is a very short and simple way to do it with ES6:
function getAllSiblings(element, parent) {
const children = [...parent.children];
return children.filter(child => child !== element);
}
This will return all children of the parent node that are not the element.
回答4:
You can get all of the children of the element's parent, and exclude the element itself.
回答5:
This is an update to @subhaze's answer.
This code uses the matches DOM method which is supported in modern browsers:
Demo
function matches(elem, filter) {
if (elem && elem.nodeType === 1) {
if (filter) {
return elem.matches(filter);
}
return true;
}
return false;
}
// this will start from the current element and get all of
// the next siblings
function getNextSiblings(elem, filter) {
var sibs = [];
while (elem = elem.nextSibling) {
if (matches(elem, filter)) {
sibs.push(elem);
}
}
return sibs;
}
// this will start from the current element and get all the
// previous siblings
function getPreviousSiblings(elem, filter) {
var sibs = [];
while (elem = elem.previousSibling) {
if (matches(elem, filter)) {
sibs.push(elem);
}
}
return sibs;
}
// this will start from the first child of the current element's
// parent and get all the siblings
function getAllSiblings(elem, filter) {
var sibs = [];
elem = elem.parentNode.firstChild;
while (elem = elem.nextSibling) {
if (matches(elem, filter)) {
sibs.push(elem);
}
}
return sibs;
}
Use these functions as follows:
var elem = document.querySelector('#test');
// find all the "div" and "span" siblings
var after = getNextSiblings(elem, 'div, span');
// find previous siblings with ".list-item" class
var index = getPreviousSiblings(elem, '.list-item');
// get all siblings with a title attribute
var allSibs = getAllSiblings(elem, '[title]');
回答6:
back to 2017:
Maybe there is a better answer but that good and a little bit cleaner
function sibiling(dom, query) {
var doms = dom.parentElement.querySelectorAll(query);
return [].slice.call(doms).filter( d => d != dom);
}
回答7:
This answer was previously published here in response to a similar question .
There are a few ways to do it.
Either one of the following should do the trick.
// METHOD A (ARRAY.FILTER, STRING.INDEXOF)
var siblings = function(node, children) {
siblingList = children.filter(function(val) {
return [node].indexOf(val) != -1;
});
return siblingList;
}
// METHOD B (FOR LOOP, IF STATEMENT, ARRAY.PUSH)
var siblings = function(node, children) {
var siblingList = [];
for (var n = children.length - 1; n >= 0; n--) {
if (children[n] != node) {
siblingList.push(children[n]);
}
}
return siblingList;
}
// METHOD C (STRING.INDEXOF, ARRAY.SPLICE)
var siblings = function(node, children) {
siblingList = children;
index = siblingList.indexOf(node);
if(index != -1) {
siblingList.splice(index, 1);
}
return siblingList;
}
FYI: The jQuery code-base is a great resource for observing Grade A Javascript.
Here is an excellant tool that reveals the jQuery code-base in a very streamlined way. http://james.padolsey.com/jquery/
回答8:
Just my two cents here, I made a couple of functions to get all the previos and the next siblings of any element.
const getPreviousAll = element => {
const previousAllFound = [];
const getPrevious = element => {
if (element !== null) {
previousAllFound.push(element);
const previousFound = element.previousElementSibling;
if (previousFound !== null) {
getPrevious(previousFound);
}
}
};
getPrevious(element.previousElementSibling);
return previousAllFound;
};
const getNextAll = element => {
const target = element;
const nextAllFound = [];
const getAll = element => {
if (element !== null) {
nextAllFound.push(element);
const nextFound = element.nextElementSibling;
if (nextFound !== null) {
getAll(nextFound);
}
}
};
getAll(element.nextElementSibling);
return nextAllFound;
};
You just have to call this functions with a node that you can get by getElementById.
回答9:
All previous siblings
// jQuery (optional filter selector)
$el.prevAll($filter);
// Native (optional filter function)
function getPreviousSiblings(elem, filter) {
var sibs = [];
while (elem = elem.previousSibling) {
if (elem.nodeType === 3) continue; // ignore text nodes
if (!filter || filter(elem)) sibs.push(elem);
}
return sibs;
}
All next siblings
// jQuery (optional selector filter)
$el.nextAll($filter);
// Native (optional filter function)
function getNextSiblings(elem, filter) {
var sibs = [];
var nextElem = elem.parentNode.firstChild;
do {
if (nextElem.nodeType === 3) continue; // ignore text nodes
if (nextElem === elem) continue; // ignore elem of target
if (nextElem === elem.nextElementSibling) {
if (!filter || filter(elem)) {
sibs.push(nextElem);
elem = nextElem;
}
}
} while(nextElem = nextElem.nextSibling)
return sibs;
}
An example of filter function:
function exampleFilter(elem) {
switch (elem.nodeName.toUpperCase()) {
case 'DIV':
return true;
case 'SPAN':
return true;
default:
return false;
}
}
来源：https://stackoverflow.com/questions/4378784/how-to-find-all-siblings-of-currently-selected-object