jquery - 获取没有子文本的元素的文本

1个回答

小呜呜呜呜啊

2025-07-10 03:51

使用jQuery可以很方便地获取元素的文本内容，但有时我们只想获取没有子文本的元素的文本。在本文中，我们将介绍如何通过jQuery来获取这样的元素，并提供一个案例代码来说明。

首先，我们需要明确什么是没有子文本的元素。在HTML中，元素可以包含其他元素，这些元素可以是文本节点、其他元素节点或注释节点。当元素没有包含任何文本节点时，我们称之为没有子文本的元素。

为了获取没有子文本的元素的文本内容，我们可以使用jQuery的.contents()方法来获取元素的所有子节点。然后，我们可以使用.filter()方法来过滤掉非文本节点，只留下文本节点。最后，我们可以使用.text()方法来获取文本节点的文本内容。

下面是一个例子，我们将获取一个没有子文本的

元素的文本内容：

html
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.JS"></script>
</head>
<body>
  这是一个没有子文本的段落。
  <script>
    $(document).ready(function() {
      var text = $('#example').contents().filter(function() {
        return this.nodeType === 3; // 过滤出文本节点
      }).text();
      console.log(text); // 输出：这是一个没有子文本的段落。
    });
  </script>
</body>
</html>

在上面的例子中，我们首先使用$(document).ready()来确保文档加载完毕后再执行代码。然后，我们通过$('#example')选择器选择了id为example的

元素。接着，我们使用.contents()方法获取了该元素的所有子节点，并使用.filter()方法过滤出文本节点。最后，我们使用.text()方法获取了文本节点的文本内容，并将其打印到控制台上。

案例代码

下面是一个更复杂的案例代码，我们将获取所有没有子文本的

元素的文本内容，并将其显示在页面上：

html
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.JS"></script>
</head>
<body>
  <div>这是一个有子文本的<div>元素。</div></div>
  <div>这是一个没有子文本的<div>元素。</div></div>
  <div>这是另一个没有子文本的<div>元素。</div></div>
  
  <h2><strong>没有子文本的div元素</strong></h2>
  <ul id="result"></ul>
  <script>
    $(document).ready(function() {
      $('div').each(function() {
        var text = $(this).contents().filter(function() {
          return this.nodeType === 3; // 过滤出文本节点
        }).text();
        if (text.trim() === '') {
          $('#result').append('<li>' + $(this).text() + '</li>');
        }
      });
    });
  </script>
</body>
</html>

在上面的例子中，我们首先使用$('div').each()来遍历所有的

元素。然后，我们使用与之前相同的方法来获取每个

元素的文本内容。如果文本内容为空，则将该

元素的文本内容添加到

元素中。
通过以上的案例代码，我们可以清楚地了解如何使用jQuery来获取没有子文本的元素的文本内容。这对于在处理HTML文档时非常有用，可以帮助我们更精确地选择和操作元素。希望本文对你有所帮助！

举报有用（4）分享收藏

jquery - 获取没有子文本的元素的文本

1个回答

小呜呜呜呜啊

热门话题

相关问题