jq: dom的筛选

最新推荐文章于 2025-05-16 16:00:56 发布

原创最新推荐文章于 2025-05-16 16:00:56 发布 · 205 阅读

CC 4.0 BY-SA版权

本文深入解析了jQuery中各种筛选方法的应用，包括:first/:last选取首个/末个元素，:odd/:even选取奇数/偶数索引元素，:eq选取指定索引元素，以及prev/next/siblings等方法的选择相邻/所有兄弟元素策略。同时，还介绍了filter/not方法的使用，以及如何利用slice/map等函数进行元素的截取和高级筛选。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

筛选

jq中除了传css选择器以外，还可以传其他: 如li:first(li中的第一个)

:first(第一个) / :last(最后一个)

        <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>dom的筛选</title>
    <style>
    ul {
        margin: 0;
        width: 200px;
    }
    li {
        list-style: none;
        margin: 10px 0;
        padding: 10px;
        text-align: center;
        background: #e0eee8;
        border-radius: 10%;
    }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
<script src="http://code.jquery.com/jquery-3.4.1.js"></script>
<script>
    $('li:first').css('background-color', '#eacd76');
    $('li:last').css('background-color', '#40de5a');
</script>
</body>
</html>

:odd(索引为奇数) / :even(索引为偶数)

        $('li:odd').css('background-color', '#eacd76');
$('li:even').css('background-color', '#40de5a');

:eq(具体的索引)，如果是负数倒着来，如-1是最后一个

        $('li:eq(2)').css('background-color', '#eacd76');

        $('li').eq(2).css('background-color', '#eacd76');
$('li').first().css('background-color', '#3eede7');
$('li').last().css('background-color', '#fff143');

这三个可以写在后面。

prev() / prevAll()

        $('li').eq(2).prev().css('background-color', '#eacd76');

prev选择当前元素的上面的兄弟元素，(可以传参，可以判断是不是该类似的元素)。

prevAll选择当前元素上面的全部兄弟元素。

nextAll如果没有具体选择哪个li，全部选中，但最后一个不会选中。

next() / nextAll()

用法和prev一样。nextAll如果没有具体选择哪个li，全部选中，但第一个不会被选中。

        $('li').nextAll().css('background-color', '#eacd76');

siblings() 除了当前元素，其他的都选中。如果没有具体元素，则全部选中。

        $('li:eq(2)').siblings().css('background-color', '#eacd76');

filter。

可以写css选择器，拥有的会被选择出来。

也可以写函数，只要filter结果不等于false,可以根据函数index值选择，也可以选择全部

        $('li').filter(function(index, ele) {
    return index % 2 == 0; // 只要return不等于false就可以
}).css('background-color', '#eacd76');

not

可以传css选择器，可以传函数

和filter刚刚相反，只要不是当前元素的兄弟元素都可以选中。

        $('li').not('.test').css('background-color', '#eacd76');

is 判断这个范围中是否包含参数，包含则返回true

        console.log($('li').is('.test'));

slice 截取

参数取头不取尾

        $('li').slice(2, 4).css('background', '#fff2df');

map。

each的进阶版，each只可以遍历，处理数据需要其他的配合。

map遍历完后，还可以写条件，返回满足的元素(jq对象)。

        <ul>
    <li>
        <span class="food">瓜子</span>
        <span class="price">4</span>
    </li>
    <li>
        <span class="food">花生</span>
        <span class="price">3</span>
    </li>
    <li>
        <span class="food">矿泉水</span>
        <span class="price">1</span>
    </li>
    <li>
        <span class="food">方便面</span>
        <span class="price">2.5</span>
    </li>
</ul>
<script src="http://code.jquery.com/jquery-3.4.1.js"></script>
<script>
    $('li').map(function(index, ele) {
        if( $(ele).find('.price').text() > 2 ) {
            return ele;
         }
    }).css('background', '#fff2df');
</script>