js 獲取元素所有兄弟節點例項

2021-08-02 21:43:36 字數 1245 閱讀 8284

比如乙個ul裡面有10個li,而第3個li上有特殊的樣式(比如顏色為紅色,其他為黑色)。我想把其他所有li——不包括紅的li——的顏色也設為紅色,此時,就需要獲得紅li的所有兄弟節點。

兄弟,就是和你平輩的,既不是上一級也不是下一級,而且可能有比你大的(兄),也可能比你小(弟)。兄弟節點同理,下面是乙個常規的獲取兄弟節點的辦法。

**如下

複製**

function siblings(elm)

}return r;

}思路:先找到此元素的父節點的第乙個子節點,然後迴圈查詢此節點的下乙個兄弟節點,一直到查詢完畢。

我很奇怪為什麼jquery會使用這個方法,難道這個方法比第乙個方法效率更高?

經過我初步測試——1500多個li,上面兩個方法效率幾乎無差別,都是幾毫秒內就獲取成功了。測試環境是chrome與firefox。

如果有獲取所有兄弟節點的需求,可以使用以上任一方法。

當然,我會在以後的使用過程中驗證以上兩個方法,如果有出入,再更新吧。

jquery的父,子,兄弟節點查詢方法

jquery.parent(expr)  找父親節點,可以傳入expr進行過濾,比如$("span").parent()或者$("span").parent(".class")

jquery.parents(expr),類似於jquery.parents(expr),但是是查詢所有祖先元素,不限於父元素

jquery.children(expr).返回所有子節點,這個方法只會返回直接的孩子節點,不會返回所有的子孫節點

jquery.contents(),返回下面的所有內容,包括節點和文字。這個方法和children()的區別就在於,包括空白文字,也會被作為乙個

jquery物件返回,children()則只會返回節點

jquery.prev(),返回上乙個兄弟節點,不是所有的兄弟節點

jquery.prevall(),返回所有之前的兄弟節點

jquery.next(),返回下乙個兄弟節點,不是所有的兄弟節點

jquery.nextall(),返回所有之後的兄弟節點

jquery.siblings(),返回兄弟姐妹節點,不分前後

jquery.find(expr),跟jquery.filter(expr)完全不一樣。jquery.filter()是從初始的jquery物件集合中篩選出一部分,而jquery.find()

的返回結果,不會有初始集合中的內容,比如$("p"),find("span"),是從元素開始找,等同於$("p span")

HTML js獲取元素的所有兄弟節點

function siblings context return siblings 先獲取此元素的父節點中的所有子節點,因為所有子節點也包括此元素自己,所以要從結果中去掉自己。jquery.parent expr 找父親節點,可以傳入expr進行過濾,比如 span parent 或者 span p...

JS獲取父節點 子節點 兄弟節點

1 訪問父節點 parentnode node 型別,返回指定節點的父節點,如果指定節點沒有父節點,則返回 null box hello hello world p div var hello document.getelementbyid hello console.log hello.paren...

jquery 獲取元素 父節點,子節點,兄弟節點

test1 parent 父節點 test1 parents 全部父節點 test1 parents mui content 返回class為mui content的父節點 test1 children 全部子節點 test1 children test1 返回id為test1的子節點 test1 ...