js 獲取元素所有兄弟節(jié)點(diǎn)實(shí)例

比如一個(gè)ul里面有10個(gè)li成洗,而第3個(gè)li上有特殊的樣式(比如顏色為紅色五督,其他為黑色)。我想把其他所有l(wèi)i——不包括紅的li——的顏色也設(shè)為紅色瓶殃,此時(shí)充包,就需要獲得紅li的所有兄弟節(jié)點(diǎn)。

兄弟遥椿,就是和你平輩的基矮,既不是上一級(jí)也不是下一級(jí),而且可能有比你大的(兄)冠场,也可能比你屑医健(弟)。兄弟節(jié)點(diǎn)同理碴裙,下面是一個(gè)常規(guī)的獲取兄弟節(jié)點(diǎn)的辦法钢悲。

代碼如下 復(fù)制代碼

function siblings(elm) {

var a = [];

var p = elm.parentNode.children;

for(var i =0,pl= p.length;i

if(p[i] !== elm) a.push(p[i]);

}

return a;

}

思路:先獲取此元素的父節(jié)點(diǎn)的所有子節(jié)點(diǎn),因?yàn)樗凶庸?jié)點(diǎn)也包括此元素自己舔株,所以要從結(jié)果中去掉自己莺琳。

還有另外一種看起來(lái)比較奇特的方法,是jQuery里面獲取兄弟節(jié)點(diǎn)的源碼:

代碼如下 復(fù)制代碼

function sibling( elem ) {

var r = [];

var n = elem.parentNode.firstChild;

for ( ; n; n = n.nextSibling ) {

if ( n.nodeType === 1 && n !== elem ) {

r.push( n );

}

}

思路:先找到此元素的父節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)载慈,然后循環(huán)查找此節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)惭等,一直到查找完畢。

我很奇怪為什么jQuery會(huì)使用這個(gè)方法办铡,難道這個(gè)方法比第一個(gè)方法效率更高咕缎?

經(jīng)過(guò)我初步測(cè)試——1500多個(gè)li,上面兩個(gè)方法效率幾乎無(wú)(www.111cn.net)差別料扰,都是幾毫秒內(nèi)就獲取成功了凭豪。測(cè)試環(huán)境是chrome與firefox。

如果有獲取所有兄弟節(jié)點(diǎn)的需求晒杈,可以使用以上任一方法嫂伞。

當(dāng)然,我會(huì)在以后的使用過(guò)程中驗(yàn)證以上兩個(gè)方法,如果有出入帖努,再更新吧撰豺。

JQUERY的父,子拼余,兄弟節(jié)點(diǎn)查找方法

jQuery.parent(expr) 找父親節(jié)點(diǎn)污桦,可以傳入expr進(jìn)行過(guò)濾,比如$(“span”).parent()或者$(“span”).parent(“.class”)

jQuery.parents(expr),類(lèi)似于jQuery.parents(expr),但是是查找所有祖先元素匙监,不限于父元素

jQuery.children(expr).返回所有子節(jié)點(diǎn)凡橱,這個(gè)方法只會(huì)返回直接的孩子節(jié)點(diǎn),不會(huì)返回所有的子孫節(jié)點(diǎn)

jQuery.contents(),返回下面的所有內(nèi)容亭姥,包括節(jié)點(diǎn)和文本稼钩。這個(gè)方法和children()的區(qū)別就在于,包括空白文本达罗,也會(huì)被作為一個(gè)

jQuery對(duì)象返回坝撑,children()則只會(huì)返回節(jié)點(diǎn)

jQuery.prev(),返回上一個(gè)兄弟節(jié)點(diǎn)粮揉,不是所有的兄弟節(jié)點(diǎn)

jQuery.prevAll()巡李,返回所有之前的兄弟節(jié)點(diǎn)

jQuery.next(),返回下一個(gè)兄弟節(jié)點(diǎn),不是所有的兄弟節(jié)點(diǎn)

jQuery.nextAll()扶认,返回所有之后的兄弟節(jié)點(diǎn)

jQuery.siblings(),返回兄弟姐妹節(jié)點(diǎn)击儡,不分前后

jQuery.find(expr),跟jQuery.filter(expr)完全不一樣。jQuery.filter()是從初始的jQuery對(duì)象集合中篩選出一部分蝠引,而jQuery.find()

的返回結(jié)果阳谍,不會(huì)有初始集合中的內(nèi)容,比如$(“p”),find(“span”),是從

元素開(kāi)始找,等同于$(“p span”)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末螃概,一起剝皮案震驚了整個(gè)濱河市矫夯,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌吊洼,老刑警劉巖训貌,帶你破解...
    沈念sama閱讀 210,914評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異冒窍,居然都是意外死亡递沪,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評(píng)論 2 383
  • 文/潘曉璐 我一進(jìn)店門(mén)综液,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)款慨,“玉大人,你說(shuō)我怎么就攤上這事谬莹¢莸欤” “怎么了桩了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 156,531評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)埠戳。 經(jīng)常有香客問(wèn)我井誉,道長(zhǎng),這世上最難降的妖魔是什么整胃? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,309評(píng)論 1 282
  • 正文 為了忘掉前任颗圣,我火速辦了婚禮,結(jié)果婚禮上屁使,老公的妹妹穿的比我還像新娘在岂。我一直安慰自己,他們只是感情好屋灌,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,381評(píng)論 5 384
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著应狱,像睡著了一般共郭。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上疾呻,一...
    開(kāi)封第一講書(shū)人閱讀 49,730評(píng)論 1 289
  • 那天除嘹,我揣著相機(jī)與錄音,去河邊找鬼岸蜗。 笑死尉咕,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的璃岳。 我是一名探鬼主播年缎,決...
    沈念sama閱讀 38,882評(píng)論 3 404
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼铃慷!你這毒婦竟也來(lái)了单芜?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,643評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤犁柜,失蹤者是張志新(化名)和其女友劉穎洲鸠,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體馋缅,經(jīng)...
    沈念sama閱讀 44,095評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡扒腕,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,448評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了萤悴。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片瘾腰。...
    茶點(diǎn)故事閱讀 38,566評(píng)論 1 339
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖覆履,靈堂內(nèi)的尸體忽然破棺而出居灯,到底是詐尸還是另有隱情祭务,我是刑警寧澤,帶...
    沈念sama閱讀 34,253評(píng)論 4 328
  • 正文 年R本政府宣布怪嫌,位于F島的核電站义锥,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏岩灭。R本人自食惡果不足惜拌倍,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,829評(píng)論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望噪径。 院中可真熱鬧柱恤,春花似錦、人聲如沸找爱。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,715評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)车摄。三九已至寺谤,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間吮播,已是汗流浹背变屁。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,945評(píng)論 1 264
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留意狠,地道東北人粟关。 一個(gè)月前我還...
    沈念sama閱讀 46,248評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像环戈,于是被迫代替她去往敵國(guó)和親闷板。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,440評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容