jQuery使用siblings獲取某元素所有同輩(兄弟姐妹)元素用法示例

更新時(shí)間：2017年01月30日 15:52:35 作者：aitangyong

這篇文章主要介紹了jQuery使用siblings獲取某元素所有同輩(兄弟姐妹)元素用法,結(jié)合簡(jiǎn)單實(shí)例形式分析了siblings()函數(shù)獲取同輩元素的操作技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery使用siblings獲取某元素所有同輩(兄弟姐妹)元素用法。分享給大家供大家參考，具體如下：

siblings()屬于jQuery篩選類的API，用來查找某個(gè)元素的所有同輩元素(所有兄弟姐妹)。

<div id="contentHolder">
  <input type="button" value="1" id="button1"></input>
  <input type="button" value="2" id="button2"></input>
  <input type="button" value="3" id="button3"></input>
</div>

假如需要實(shí)現(xiàn)如下功能：點(diǎn)擊某個(gè)按鈕的時(shí)候，該按鈕背景色變成#88b828，其他按鈕背景色變成#15b494。這個(gè)時(shí)候，siblings這個(gè)API很有用，也很簡(jiǎn)單。

$(function(){
  $("#contentHolder input[type='button']").click(function(){
    $(this).css("background","#88b828");
    $(this).siblings().css("background","#15b494");
  });
})

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁(yè)面元素操作技巧匯總》、《jquery選擇器用法總結(jié)》、《jQuery表單操作總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》及《jQuery常見經(jīng)典特效匯總》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jquery dialog open后,服務(wù)器端控件失效的快速解決方法
本篇文章是對(duì)jquery dialog open后,服務(wù)器端控件失效的快速解決方法。進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-12-12
jQuery Validate驗(yàn)證框架詳解(推薦)
jQuery Validate 插件為表單提供了強(qiáng)大的驗(yàn)證功能,讓客戶端表單驗(yàn)證變得更簡(jiǎn)單,同時(shí)提供了大量的定制選項(xiàng),滿足應(yīng)用程序各種需求。有興趣的可以了解一下。
2016-12-12
jquery鏈?zhǔn)讲僮鞯恼_使用方法
jQuery實(shí)現(xiàn)方法的鏈?zhǔn)讲僮魇欠浅Ｈ菀椎摹＿@里給出正確的使用方法
2014-01-01
jquery mobile changepage的三種傳參方法介紹
本來覺得changePage 那么多option,傳幾個(gè)參數(shù)應(yīng)該沒問題結(jié)果翻遍國(guó)內(nèi)外網(wǎng)站,基本方法只有三種，下面與大家分享下，感興趣的朋友可以參考下
2013-09-09
初窺JQuery-Jquery簡(jiǎn)介入門了解篇
JQuery是一種非常靈活的腳本庫(kù)，JQuery庫(kù)為Web腳本編程提供了通用的抽象層，已經(jīng)是比較流行的js框架了。
2010-11-11
jquery實(shí)現(xiàn)的點(diǎn)擊翻書效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)的點(diǎn)擊翻書效果代碼,可呈現(xiàn)點(diǎn)擊圖片顯示翻頁(yè)的效果,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)改變頁(yè)面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-11-11
jQuery插件擴(kuò)展操作入門示例
這篇文章主要介紹了jQuery插件擴(kuò)展操作,結(jié)合簡(jiǎn)單實(shí)例形式分析了jQuery擴(kuò)展方法的定義與使用技巧,非常簡(jiǎn)單易懂,需要的朋友可以參考下
2017-01-01
Jquery實(shí)現(xiàn)控件的隱藏和顯示實(shí)例
本篇文章主要是對(duì)Jquery實(shí)現(xiàn)控件的隱藏和顯示實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-02-02
jQuery - AJAX load() 實(shí)例用法詳解
這篇文章主要介紹了jQuery - AJAX load() 實(shí)例用法以及相關(guān)知識(shí)點(diǎn)總結(jié)，有需要的朋友們參考下。
2019-08-08
原來Jquery.load的方法可以一直load下去
使用jQuery.load方法加載一個(gè)網(wǎng)頁(yè)，那么這個(gè)網(wǎng)頁(yè)內(nèi)部的js代碼是否能夠執(zhí)行呢，答案是肯定的，這就相當(dāng)于把load的內(nèi)容與主頁(yè)面進(jìn)行了合并一樣
2011-03-03