jQuery实现条件筛选与元素显示切换教程-html教程-PHP中文网

jQuery实现条件筛选与元素显示切换教程

心靈之曲

发布： 2025-09-23 12:37:36

原创

746人浏览过

jQuery实现条件筛选与元素显示切换教程

本教程将详细介绍如何使用jQuery根据特定条件筛选HTML列表项（li），并切换其显示状态。我们将探讨两种主要方法：利用高级jQuery选择器进行高效筛选，以及结合.each()方法实现更灵活的条件判断。文章将提供示例代码和最佳实践，帮助开发者精确控制页面元素的可见性。

在前端开发中，我们经常需要根据元素的文本内容或其他属性来动态地显示或隐藏它们。本教程将以一个具体场景为例：如何选择从第三个<li>元素开始的所有<li>，如果其内部的标签包含的数字大于0，则切换该<li>的显示状态。

场景描述

假设我们有以下HTML结构，其中每个<li>内部包含一个，中是一个数字：

<ul>
  <li class="hidden">
    <span>1</span>
  </li>
  <li class="hidden">
    <span>0</span>
  </li>
  <li class="hidden">
    <span>1</span>
  </li>
  <li class="hidden">
    <span>4</span>
  </li>
  <li class="hidden">
    <span>1</span>
  </li>
  <li class="hidden">
    <span>3</span>
  </li>
  <li class="hidden">
    <span>1</span>
  </li>
  <li class="hidden">
    <span>0</span>
  </li>
</ul>

登录后复制

初始状态下，所有<li>都通过CSS类.hidden设置为display: none;。我们的目标是，从第四个<li>（索引为3）开始，筛选出那些内容大于0的<li>，并将其显示出来。

方法一：利用高级jQuery选择器进行筛选

jQuery提供了强大的选择器，可以高效地定位到符合特定条件的元素。这种方法简洁明了，适用于条件相对简单的情况。

核心思路

使用:gt(index)选择器跳过前N个元素。
使用:not(:contains('text'))选择器排除包含特定文本的元素。
使用.parent()方法向上遍历到父元素。
使用.toggleClass()方法切换元素的显示/隐藏状态。

示例代码

首先，我们需要定义用于控制显示状态的CSS类：

.hidden {
  display: none;
}

.shown {
  display: block;
}

登录后复制

然后，在页面加载完成后执行jQuery代码：

$(function() {
  // 选择索引大于2（即从第4个元素开始）的<li>内部的<span>元素
  // 并且该<span>的文本内容不包含'0'
  // 然后获取这些<span>的父元素（即<li>），并切换其class
  $("li:gt(2) span:not(:contains('0'))").parent().toggleClass("hidden shown");
});

登录后复制

结合完整的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery选择器筛选示例</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .hidden {
            display: none;
        }
        .shown {
            display: block;
            border: 1px solid blue; /* 仅为区分显示效果 */
            margin-bottom: 5px;
            padding: 5px;
        }
    </style>
</head>
<body>

    <h2>通过jQuery选择器筛选</h2>
    <ul>
        <li class="hidden"><span>1</span></li>
        <li class="hidden"><span>0</span></li>
        <li class="hidden"><span>1</span></li>
        <li class="hidden"><span>4</span></li>
        <li class="hidden"><span>1</span></li>
        <li class="hidden"><span>3</span></li>
        <li class="hidden"><span>1</span></li>
        <li class="hidden"><span>0</span></li>
    </ul>

    <script>
        $(function() {
            // 从索引为3（即第四个）的<li>开始，选择其内部的<span>
            // 并且该<span>的文本内容不包含'0'
            // 然后获取这些<span>的父元素（即<li>），并切换其class
            $("li:gt(2) span:not(:contains('0'))").parent().toggleClass("hidden shown");
        });
    </script>

</body>
</html>

登录后复制

注意事项

:gt(2)表示选择索引大于2的元素，即从第四个元素开始（索引从0开始）。
:contains('0')是一个字符串匹配，它会匹配任何包含字符'0'的文本。例如，如果内容是"10"或"hello0world"，它也会被匹配。在本例中，我们使用:not(:contains('0'))来排除只包含'0'的。
这种方法对于纯数字且只判断是否为'0'的情况非常高效，但如果需要更复杂的数字比较（如大于5、小于10），或者中可能包含非数字字符，则需要更灵活的方法。

方法二：结合.each()方法进行迭代与条件判断

当筛选逻辑变得复杂，或者需要进行数值比较时，使用.each()方法遍历元素并结合JavaScript的条件判断会更加灵活和准确。

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

核心思路

使用:gt(index)选择器选定起始元素范围。
使用.each()方法遍历这些元素。
在遍历回调函数中，获取每个<li>内部的文本内容。
将文本内容转换为数字，并进行精确的数值比较。
根据比较结果，切换相应<li>的显示状态。

示例代码

CSS类与方法一相同：

.hidden {
  display: none;
}

.shown {
  display: block;
}

登录后复制

jQuery代码：

$(function() {
  // 选择索引大于2（即从第4个元素开始）的所有<li>元素
  $("li:gt(2)").each(function(i, el) {
    // 获取当前<li>内部<span>的文本内容，并去除首尾空白
    var spanText = $(el).text().trim();
    // 将文本内容转换为整数进行比较
    var numericValue = parseInt(spanText);

    // 如果转换后的数字大于0，则切换当前<li>的class
    if (numericValue > 0) {
      $(el).toggleClass("hidden shown");
    }
  });
});

登录后复制

结合完整的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Each方法筛选示例</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .hidden {
            display: none;
        }
        .shown {
            display: block;
            border: 1px solid green; /* 仅为区分显示效果 */
            margin-bottom: 5px;
            padding: 5px;
        }
    </style>
</head>
<body>

    <h2>通过jQuery .each() 方法筛选</h2>
    <ul>
        <li class="hidden"><span>1</span></li>
        <li class="hidden"><span>0</span></li>
        <li class="hidden"><span>1</span></li>
        <li class="hidden"><span>4</span></li>
        <li class="hidden"><span>1</span></li>
        <li class="hidden"><span>3</span></li>
        <li class="hidden"><span>1</span></li>
        <li class="hidden"><span>0</span></li>
    </ul>

    <script>
        $(function() {
            // 选择索引大于2（即从第4个元素开始）的所有<li>元素
            $("li:gt(2)").each(function(i, el) {
                // 获取当前<li>内部<span>的文本内容，并去除首尾空白
                var spanText = $(el).text().trim();
                // 将文本内容转换为整数进行比较
                var numericValue = parseInt(spanText);

                // 如果转换后的数字大于0，则切换当前<li>的class
                if (numericValue > 0) {
                    $(el).toggleClass("hidden shown");
                }
            });
        });
    </script>

</body>
</html>

登录后复制

注意事项

$(el).text().trim()用于获取当前<li>内部所有文本内容并去除前后空白。由于是<li>的唯一文本子元素，所以这样可以准确获取的内容。
parseInt(spanText)将字符串转换为整数。如果spanText不是有效的数字字符串，parseInt()会返回NaN。NaN > 0会返回false，这对于非数字内容的处理是安全的。
这种方法提供了更高的灵活性，可以实现任意复杂的条件判断，例如判断范围、浮点数比较等。

总结与最佳实践

本文介绍了两种使用jQuery根据子元素内容筛选并显示父元素的方法：

高级jQuery选择器 (:gt(), :not(), :contains())：适用于筛选条件简单、对性能要求较高的场景。其优点是代码简洁，执行效率高。缺点是:contains()是字符串匹配，对于复杂的数值判断不够精确。
.each()方法结合JavaScript逻辑：适用于筛选条件复杂、需要精确数值比较或自定义逻辑的场景。其优点是灵活性强，可以处理各种复杂的业务逻辑。缺点是相比纯选择器，代码量稍多，且在处理大量元素时可能略微影响性能（但对于一般网页应用而言通常可忽略）。

最佳实践建议：

优先使用CSS类进行显示/隐藏切换：而不是直接操作style属性（如.css("display", "block")）。使用toggleClass("hidden shown")可以更好地分离结构、样式和行为，提高代码的可维护性。
加载jQuery库：确保在执行jQuery代码之前，页面已经正确引入了jQuery库（如<script src="https://cdn js.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>）。
数值比较使用parseInt()或parseFloat()：当需要根据元素内的数值进行判断时，务必使用parseInt()或parseFloat()将字符串转换为数字，再进行比较，以避免字符串比较带来的错误。
.trim()处理文本：在获取元素文本内容时，使用.trim()可以有效去除可能存在的空白字符，确保后续处理的准确性。