JS gets the element all sibling node instance

Source: Internet
Author: User

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")

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.