遍历元素的同胞元素：siblings() 方法，next() 方法，nextAll() 方法，nextUntil() 方法。

<!DOCTYPE html>
<html>
<head>
<  http-equiv="Content-Type" content="text/html; charset=utf-8"/>
< >My Test JQuery</ >
    <  type="text/ " src="./js/jquery-1.10.2.min.js"></ >
    <  type="text/ " >    
        $(function(){ 
            //children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。
            //find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
            $("#btn_siblings").click(function(){
                $("#myDiv21").siblings().css({"color":"red","border":"3px solid red"});
            });
            $("#btn_next").click(function(){
                $("#myDiv21").next().css({"color":"red","border":"3px solid red"});
            });
            $("#btn_nextAll").click(function(){
                $("#myDiv21").nextAll().css({"color":"red","border":"3px solid red"});
            });
            $("#btn_nextUntil").click(function(){
                $("#myDiv21").nextUntil("h5").css({"color":"red","border":"3px solid red"});
            });
        });
    </ >
</head>
<body>
    <button type="button" id="btn_siblings">siblings</button><br/>
    <button type="button" id="btn_next">next</button><br/>
    <button type="button" id="btn_nextAll">nextAll</button><br/>
    <button type="button" id="btn_nextUntil">nextUntil</button><br/>
    <div id="myDiv1" style="width:210px;height:190px;padding: 10px;border:2px solid blue;">
        <div id="myDiv21" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >
        </div>
        <div id="myDiv22" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >
        </div>
        <div id="myDiv23" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >
        </div>
        <h5>Hello</h5>
        <div id="myDiv24" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >
        </div>
    </div>   
</body>
</html>

\"\" \"\" \"\"

\"\" \"\"

 

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章