jQuery next()

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

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

jQuery1.0版本新增。

語法結構:

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

引數解析:

selector：一個字串，其中包含一個選擇器表示式針對匹配元素進行篩選。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/> 
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.box{
  height:200px;
  width:200px;
  background-color:#ccc;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").next().css("color","blue")
})
</script> 
</head>
<body>
<div class="box">
  <p>螞蟻部落一</p>
  <span>螞蟻部落二</span>
  <p>螞蟻部落三</p>
  <div>螞蟻部落四</div>
</div>
</body>
</html>

將每一個p元素緊鄰的元素中的字型顏色設定為藍色。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/> 
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.box{
  height:200px;
  width:200px;
  background-color:#ccc;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").next("span").css("color","blue")
})
</script> 
</head>
<body>
<div class="box">
  <p>螞蟻部落一</p>
  <span>螞蟻部落二</span>
  <p>螞蟻部落三</p>
  <div>螞蟻部落四</div>
</div>
</body>
</html>

將與p元素緊鄰的span元素中的字型顏色設定為藍色。

相關文章