分享2个简单实用的jQuery选择器

1、子选择器:nth-child 匹配其父元素下的第N个子或奇偶元素。

nthchild

代码实例:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script>
        $(document).ready(function(){
            $("ol li:nth-child(5n)").addClass("last");
        })
    </script>
    <style>
        *{ color: #666; text-decoration-line: none;}
        .last a{color: #f00;}
    </style>
    </head>
    <body>
    <ol>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
    </ol>

2、选择的标签加class,其他同级元素标签移除class

removeclass

Select Code
1
2
3
4
5
6
7
8
9
<!-- 
点击的当前li添加class, 其他移除class
-->
<script>
    $("ol li a").click(function(){
        $(this).parents().children().removeClass('last');
        $(this).parent().addClass('last');
    })
</script>