JS gets the implementation method of all sibling nodes of elements _javascript tips

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

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

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 will not have the contents of the initial set, such as $ ("P"), Find ("span"), from the <p> element start looking for <span>, equivalent to $ ("P span")

The above JS get element all sibling node realization method is small series to share all the content, hope to give you a reference, also hope that we support cloud habitat community.