For example, there are 10 lis in one ul, and there is a special style on the third li (such as the color is red, and the others are black). I want to set the color of all other lis - not including red lis - to red. At this time, you need to obtain all the brother nodes of red lis.
Brothers are those who are the same as you, neither the previous or the next, and there may be (brother) older than you or younger than you. Similarly, brother nodes are used. Here is a regular way to obtain brother 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: First get all the children of the parent node of this element. Because all children also include this element itself, you must remove yourself from the result.
There is another method that looks strange, which is to obtain the source code of the brother nodes 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 node of the parent node of this element, and then loop to find the next brother node of this node until the search is completed.
I'm wondering why jQuery uses this method. Is this method more efficient than the first method?
After my preliminary test - more than 1,500 li, the above two methods have almost no difference in efficiency, and they are both successful within a few milliseconds. The test environment is chrome and firefox.
If you have the need to obtain all sibling nodes, you can use any of the above methods.
Of course, I will verify the above two methods in the future. If there are any differences, I will update them.
JQUERY's parent, son, and brother node search method
jQuery.parent(expr) Find the parent 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 it searches for all ancestor elements, not limited to parent elements
jQuery.children(expr). Returns all child nodes. This method will only return direct child nodes and will not return all child nodes.
jQuery.contents(), returns all the following contents, including nodes and text. The difference between this method and children() is that, including blank text, will also be used as a
jQuery object returns, children() will only return node
jQuery.prev(), returns the previous sibling node, not all sibling nodes
jQuery.prevAll(), return all previous sibling nodes
jQuery.next(), returns the next sibling node, not all sibling nodes
jQuery.nextAll(), return all subsequent sibling nodes
jQuery.siblings(), returns the sibling node, regardless of the front and back
jQuery.find(expr), is completely different from jQuery.filter(expr). jQuery.filter() is to filter out a part of the initial jQuery object collection, while jQuery.find()
The return result will not have content in the initial collection, such as $("p"), find("span"), start looking for <span> from the <p> element, which is equivalent to $("p span")
The above article js to obtain all the brother nodes of elements is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.