JQuery(8)——节点遍历

最新推荐文章于 2019-10-09 21:44:39 发布

陆老师Peter

最新推荐文章于 2019-10-09 21:44:39 发布

阅读量176

点赞数

分类专栏： JQuery 文章标签： next() nextAll() prev prevAll siblings()

本文链接：https://blog.csdn.net/qq_34573534/article/details/100676539

版权

JQuery 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

1、next()方法用于获取节点之后的挨着的第一个同辈元素，$(".menuitem").next("div")、nextAll()方法用于获取节点之后的所有同辈元素，$(".menuitem").nextAll("div")

2、prev、prevAll兄弟中之前的元素。

3、siblings()方法用于获取所有同辈元素，$(“.menuitem”).siblings(“li”)。siblings、next等所有能传递选择器的地方能够使用的语法都和$()语法一样。如果是两组ul，则其中一个的siblings不包括另外一个ui中的，兄弟指的是同父元素的。

4、案例：选中的p变色：$(this).css();$(this).siblings().css()

$("p").click(function() {
                $(this).css("background", "red");
                $(this).siblings().css("background","white");
            });
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>

5、案例：评分控件。prevAll,this,nextAll

    <script type="text/javascript">
        $(function() {
            $("#table1 td").css("cursor", "pointer");
            $("#table1 td").click(function() {
                $("#table1 td").css("background", "red");
                $(this).nextAll("td").css("background", "white");
            });
        });
    </script>

    <table id="table1" border="1">
        <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    </table>

6、重申问题，不要$().click=function；好多时候能.出来；不要在引用js的代码里再写代码。