jQuery siblings()

admin發表於2017-02-15
jQuery
此方法獲取匹配元素集合中每一個元素的同輩元素。

同輩元素集合可以使用表示式進行篩選。

jQuery1.0版本新增。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
.siblings([selector])

引數解析:

selector:用於匹配元素的選擇器字串。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
ul li {
  list-style-type:none;
  height:20px;
  line-height:20px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $(".antzone").siblings().css("color","green") 
}) 
</script> 
</head> 
<body> 
<ul>
  <li>本站的url地址是softwhy.com。</li>
  <li>只有努力奮鬥才會有美好的未來。</li>
  <li class="antzone">沒有人一開始就是告訴，必須付出自己的汗水</li>
  <li>每一天都是新的，要好好珍惜把握。</li>
  <li>當前的時間才是真實的，下一秒都是虛幻。</li>
</ul>
</body> 
</html>

上面的程式碼可以將antzone的兄弟元素的字型顏色設定為綠色。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
ul li {
  list-style-type:none;
  height:20px;
  line-height:20px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $(".antzone").siblings(".done").css("color", "green")
}) 
</script> 
</head> 
<body> 
<ul>
  <li>本站的url地址是softwhy.com。</li>
  <li class="done">只有努力奮鬥才會有美好的未來。</li>
  <li class="antzone">沒有人一開始就是告訴，必須付出自己的汗水</li>
  <li>每一天都是新的，要好好珍惜把握。</li>
  <li class="done">當前的時間才是真實的，下一秒都是虛幻。</li>
</ul>
</body> 
</html>

將class屬性值為done元素字型顏色設定為綠色。

相關文章