JS gets the element all sibling node instance

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

Brother, is peace with you, neither at the level nor the next level, and there may be older than you (brother), may be younger than you (younger brother). Sibling node in the same way, here is a regular method of acquiring sibling nodes.

The code is as follows	Copy Code
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 the child nodes of the parent node of this element first, because all child nodes also include this element themselves, so get rid of yourself from the result.

Another way to look strange is to get the source of the sibling node in jquery:

The code is as follows	Copy Code
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: First find the first child of the parent of this element, and then loop through the next sibling node of the node until the search is complete.

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

After my initial test--more than 1500 Li, the above two methods were almost as efficient as they were in milliseconds. The test environment is Chrome and Firefox.

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

Of course, I will be in the future use of the process to verify the above two methods, if there are discrepancies, and then update it.

jquery's parent, son, sibling node lookup method

Jquery.parent (expr) for the Father node, you can filter through expr, such as $ ("span"). Parent () or $ ("span"). Parent (". Class")

Jquery.parents (expr), similar to jquery.parents (expr), but is to find all ancestor elements, not limited to the parent element

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

Jquery.contents () returns all of the following, including nodes and text. The difference between this method and children () is that, including blank text, it is also 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 (), return all previous sibling nodes

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

Jquery.nextall (), returning all sibling nodes after

Jquery.siblings (), Return sibling node, no points before and after

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

The return result of the

will not have the contents of the initial collection, such as $ ("P"), Find ("span"), which is to look for <span> from the <p> element, equivalent to $ ("p span")