jQuery实战：根据文本内容和DOM位置筛选并显示元素-html教程-PHP中文网

jQuery实战：根据文本内容和DOM位置筛选并显示元素

碧海醫心

发布： 2025-09-23 14:13:00

原创

772人浏览过

jQuery实战：根据文本内容和DOM位置筛选并显示元素

本文详细介绍了如何利用jQuery筛选并操作HTML中的特定<li>元素。通过结合使用:gt、:not、:contains等选择器，或通过.each()方法进行迭代和条件判断，可以精确地定位从第三个<li>标签开始，且其内部标签文本内容大于0的<li>元素，并动态切换其显示状态，从而实现页面元素的精细化控制。

在网页开发中，我们经常需要根据元素的特定属性、内容或在dom结构中的位置来动态地显示或隐藏它们。本教程将聚焦于一个具体的场景：如何使用jquery选择从第三个<li>标签（索引为2）之后的<li>元素，并且这些<li>元素内部的标签所包含的数字内容必须大于0，然后将这些匹配到的<li>元素的显示状态从隐藏切换为显示。

场景描述与挑战

假设我们有如下HTML结构，其中包含一系列<li>元素，每个<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>元素开始（即索引大于2的<li>元素，因为索引从0开始）。
在这些选定的<li>中，进一步筛选其内部标签的文本内容大于0的<li>。
将这些最终匹配到的<li>元素的显示状态从hidden（display: none;）切换为shown（display: block;）。

我们将探讨两种主要的jQuery实现方法。

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

jQuery强大的选择器组合能力使得我们能够以声明式的方式快速定位目标元素。这种方法通常更简洁，且对于简单的条件判断效率较高。

核心选择器解析

li:gt(2)：这个选择器会匹配所有索引大于2的<li>元素。在零索引的DOM集合中，这意味着从第四个<li>元素开始。
span:not(:contains('0'))：这个选择器用于匹配那些不包含文本“0”的元素。需要注意的是，:contains()是基于文本内容进行匹配的，所以span:not(:contains('0'))会排除掉那些明确包含“0”的，但不区分“0”是数字还是字符串的一部分（例如，它也会排除“10”）。
.parent()：在找到符合条件的后，我们需要向上遍历到其父元素<li>，以便对<li>进行操作。

示例代码

$(function() {
  // 当DOM加载完成后执行
  $("li:gt(2) span:not(:contains('0'))").parent().toggleClass("hidden shown");
});

登录后复制

对应的CSS样式

为了实现显示/隐藏的切换，我们定义两个CSS类：

.hidden {
  display: none;
}

.shown {
  display: block;
}

登录后复制

完整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;
        }
    </style>
</head>
<body>
    <h1>jQuery选择器筛选示例</h1>
    <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() {
          // 当DOM加载完成后执行
          $("li:gt(2) span:not(:contains('0'))").parent().toggleClass("hidden shown");
        });
    </script>
</body>
</html>

登录后复制

运行上述代码，你会发现从第四个<li>开始，所有内容不为“0”的<li>都将显示出来。

方法二：使用.each()迭代与逻辑判断

当筛选条件变得更加复杂，或者需要进行数值比较等更精细的逻辑处理时，.each()方法结合JavaScript的条件判断会更加灵活和强大。

芦笋演示

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

查看详情

核心逻辑解析

初步筛选：首先使用li:gt(2)选择从第四个<li>开始的所有<li>元素。
遍历与判断：对这些初步筛选出的<li>元素使用.each()方法进行遍历。在每次迭代中：
- 获取当前<li>内部的文本内容。
- 使用trim()去除可能的空白字符。
- 使用parseInt()将文本内容转换为整数。
- 进行数值比较：如果转换后的数字大于0，则执行切换显示状态的操作。

示例代码

$(function() {
  // 当DOM加载完成后执行
  $("li:gt(2)").each(function(i, el) {
    // 获取当前<li>内部<span>的文本内容
    var cnt = $(el).text().trim();
    // 将文本转换为整数并判断是否大于0
    if (parseInt(cnt) > 0) {
      // 如果大于0，则切换其父元素<li>的类
      $(el).toggleClass("hidden shown");
    }
  });
});

登录后复制

对应的CSS样式

CSS样式与方法一相同：

.hidden {
  display: none;
}

.shown {
  display: block;
}

登录后复制

完整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;
        }
    </style>
</head>
<body>
    <h1>jQuery .each()筛选示例</h1>
    <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() {
          // 当DOM加载完成后执行
          $("li:gt(2)").each(function(i, el) {
            // 获取当前<li>内部<span>的文本内容
            var cnt = $(el).text().trim();
            // 将文本转换为整数并判断是否大于0
            if (parseInt(cnt) > 0) {
              // 如果大于0，则切换其父元素<li>的类
              $(el).toggleClass("hidden shown");
            }
          });
        });
    </script>
</body>
</html>

登录后复制

这种方法在处理数值比较（如大于、小于、等于某个特定数字）时更为精确，因为它将文本内容明确转换为数字进行比较。

直接修改CSS属性的替代方案

虽然不推荐直接在JavaScript中操作元素的style属性，因为它增加了样式与行为的耦合度，但在某些特定场景下，你也可以选择使用.css()方法直接修改样式：

// 使用方法一的选择器，直接修改CSS
$("li:gt(2) span:not(:contains('0'))").parent().css("display", "block");

// 或者结合方法二的逻辑
// $("li:gt(2)").each(function(i, el) {
//   var cnt = $(el).text().trim();
//   if (parseInt(cnt) > 0) {
//     $(el).css("display", "block");
//   }
// });

登录后复制

这种方式的缺点是：如果后续需要改变显示方式（例如从block改为flex），你需要修改JavaScript代码。而使用CSS类，你只需要修改CSS文件即可。

最佳实践与注意事项

使用CSS类管理样式：强烈推荐使用.toggleClass()结合CSS类来管理元素的显示/隐藏状态。这有助于保持代码的整洁性、可维护性，并遵循结构（HTML）、样式（CSS）、行为（JavaScript）分离的原则。
理解jQuery选择器：熟悉:gt(), :not(), :contains()等选择器及其组合方式，能让你更高效地定位元素。
文本处理与类型转换：
- .text()：用于获取元素的纯文本内容。
- .trim()：去除字符串两端的空白字符，这在进行数值转换前尤其重要。
- parseInt()：将字符串解析为整数。在进行数值比较时，确保将文本内容正确转换为数字类型。
DOM操作性能：虽然jQuery在优化DOM操作方面做了很多工作，但频繁或大量的DOM操作仍可能影响页面性能。在可能的情况下，尽量一次性选择所有目标元素，然后进行操作，而不是在循环中反复查询DOM。
语义化HTML：构建清晰、语义化的HTML结构有助于编写更简洁、更易懂的jQuery代码。

总结

本教程展示了如何使用jQuery根据元素的文本内容和在DOM结构中的位置来筛选并动态显示/隐藏元素。无论是通过强大的jQuery选择器组合实现声明式筛选，还是通过.each()方法结合JavaScript逻辑进行精细控制，jQuery都提供了灵活高效的解决方案。选择哪种方法取决于你的具体需求和代码的复杂性，但始终推荐采用结合CSS类的最佳实践，以提高代码的可维护性和扩展性。

以上就是jQuery实战：根据文本内容和DOM位置筛选并显示元素的详细内容，更多请关注php中文网其它相关文章！