您的位置：首页 > Web前端 > JQuery

jQuery基础----19jQuery遍历之同级遍历

2015-08-16 15:01 746 查看

<!DOCTYPE html>
<!--jQuery遍历之同级遍历-->
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-2.1.4.min.js"></script>
<script src="js19.js"></script>
<style>
#div01 *{
display: block;
border: 3px solid grey;
color: #ffff00;
padding: 15px;
margin: 15px;
}

</style>
</head>
<body>
<div id="div01">
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</div>

</body>
</html>
js:

/**
* Created by hao on 2015/8/16.
*/
//.siblings()
//.next()
//.nextAll()
//.nextUntil()
//.prev()
//.prevAll()
//.prevUntil()
$(document).ready(function(){
//siblings除了h4之外的所有边框都改变
//$( "h4" ).siblings().css({ border:"3px solid #FF0000"});
//$( "h4" ).next().css({ border:"3px solid #FF0000"});
//$( "h4" ).nextAll().css({ border:"3px solid #FF0000"});
$( "h4" ).nextUntil("h1").css({ border:"3px solid #FF0000"});
//和next方向相反
$( "h4" ).prev().css({ border:"3px solid #FF0000"});

})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航