详解jQuery使用contents()方法获取指定元素的子元素和文本节点

这一次，让我们通过一个示例来了解如何使用 jQuery 的“contents()”方法。

如果只是简单的“选择子元素”，可以在children()方法中使用，但在选择“不被标签包围的文本节点”时使用contents()方法。

contents()方法的作用是什么？

contents()可以用于获取指定元素的子元素和文本节点。

contents()语法

contents()具有以下语法

$("选择器").contents();

contents()示例

例如，如果您有以下 HTML

HTML

<ul>
  <li>苹果</li>
  <li class="target">香蕉</li>
  <li>橘子</li>
  <li>葡萄</li>
</ul>

jQuery

$(function(){
  $(".target").contents().wrap("<span>")
});

执行

将此脚本另存为“test.html”并运行它。

在这个例子中，我们可以class="target"获取里面的文本节点并将其包裹在标签中，在这种情况下，“香蕉”被span包裹在一个标签中。