JS get element all sibling node instances

For example, a UL has 10 Li, and the 3rd Li has a special style (such as the color is red, the other is black). I want all the other li--not including the red li--color also set to red, at this time, you need to get red Li all the Brothers node.

Brother, is peers with you, neither the upper level nor the next level, and may be bigger than you (brother), may be younger than you (younger brother). Sibling node Similarly, here is a regular way to get a sibling node.

Code to copy code as follows

Function siblings (Elm) {
var a = [];
var p = Elm.parentNode.children;
for (var i =0,pl= p.length;i<pl;i++) {
if (P[i]!== Elm) A.push (P[i]);
}
return A;
}

Idea: Get all child nodes of the parent node of this element first, because all child nodes also include this element itself, so remove yourself from the result.

There is another way to look more peculiar, is jquery inside the source of the sibling node:

Code to copy code as follows

function Sibling (elem) {
var r = [];
var n = elem.parentNode.firstChild;
for (; n; n = n.nextsibling) {
if (N.nodetype = = = 1 && n!== elem) {
R.push (n);
}
}

return R;
}

Idea: Find the first child node of the parent node of this element first, and then loop through the next sibling node of this node until the search is complete.

I wonder why jquery uses this method, which is more efficient than the first method?

After my initial test-more than 1500 Li, the above two methods have almost no difference in efficiency (www.111cn.net), which is achieved in a few milliseconds. The test environment is Chrome and Firefox.

If you have the need to get all the sibling nodes, you can use either of these methods.

Of course, I will be in the subsequent use of the process to verify the above two methods, if there is a discrepancy, then update it.

jquery's parent, son, and brother node lookup method

Jquery.parent (expr) to find a Father node, you can pass in expr for filtering, such as $ ("span"). Parent () or $ ("span"). Parent (". Class")

Jquery.parents (expr), similar to jquery.parents (expr), but finds all ancestor elements, not limited to parent elements

Jquery.children (expr). Returns all child nodes, this method only returns a direct child node and does not return all descendant nodes

Jquery.contents (), returns all of the following, including nodes and text. The difference between this method and children () is that, including blank text, it will also be used as a

The jquery object returns, children () returns only the node

Jquery.prev (), return to the previous sibling node, not all sibling nodes

Jquery.prevall (), returns all previous sibling nodes

Jquery.next (), returns the next sibling node, not all sibling nodes

Jquery.nextall (), returns all subsequent sibling nodes

Jquery.siblings (), back to sibling nodes, no points

Jquery.find (expr) is completely different from jquery.filter (expr). Jquery.filter () is a partial filter from the initial set of jquery objects, while the Jquery.find ()

The return result, will not have the contents of the initial collection, such as $ ("P"), Find ("span"), is the beginning of the <p> element to find <span>, equivalent to $ ("P span")
From:http://www.111cn.net/wy/jquery/53761.htm

JS get element all sibling node instances