Js gets the implementation method of all the sibling nodes of the element. js nodes

Js gets the implementation method of all the sibling nodes of the element. js nodes

For example, there are 10 li in a ul, and 3rd li have special styles (for example, the color is red and others are black ). I want to set the color of all other li-including the Red li-to Red. In this case, we need to get all the brother nodes of the red li.

Brother, that is, he or she is younger than you, either at the upper or lower level. He or she may be younger than you ). The same applies to sibling nodes. The following is a conventional method for obtaining 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;}

Ideas:First, obtain all the child nodes of the parent node of this element. Because all the child nodes also include this element, remove the child nodes from the result.

Another strange method is to obtain the source code 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;}

Ideas:First, find the first child node of the parent node of this element, and then find the next sibling node of this node cyclically until the search is complete.

I wonder why jQuery uses this method. Is this method more efficient than the first method?

After my preliminary test-more than 1500 li, the efficiency of the above two methods was almost the same, and it was obtained within several milliseconds. The test environment is chrome and firefox.

If you want to obtain all the sibling nodes, you can use any of the above methods.

Of course, I will verify the above two methods in the future use process. If there is any discrepancy, update it.

JQUERY's parent, child, and sibling node lookup Method

JQuery. parent (expr) finds Father's Day points and can pass in expr for filtering, for example, $ ("span "). parent () or $ ("span "). parent (". class ")

JQuery. parents (expr) is similar to jQuery. parents (expr), but it is used to find all ancestor elements, not limited to parent elements.

JQuery. children (expr). Return all child nodes. This method only returns the direct child node and does not return all child nodes.

JQuery. contents (), which returns all the following content, including the node and text. The difference between this method and children () is that, including blank text

JQuery object, children () Only returns nodes

JQuery. prev (), returns 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 the following sibling nodes

JQuery. siblings (), returns the siblings node, regardless of the front and back

JQuery. find (expr) is completely different from jQuery. filter (expr. JQuery. filter () is a part of the initial jQuery object set, while jQuery. find ()

NO content in the initial set, for example, $ ("p"), find ("span"), starting from the <p> element <span>, equivalent to $ ("p span ")

The implementation of the above js acquisition element for all the sibling nodes is all the content shared by the editor. I hope to give you a reference, and I hope you can provide more support for the customer's house.