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

最新推荐文章于 2024-09-28 12:49:15 发布

zhaihaohao1

最新推荐文章于 2024-09-28 12:49:15 发布

阅读量422

点赞数

分类专栏： jQuery基础

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/47702491

版权

jQuery基础专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!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"});

})