jQuery 遍历 contents() 方法

jQuery 遍历 contents() 方法

jQuery 参考手册 遍历jQuery 参考手册 遍历

contents() 方法获得匹配元素集合中每个元素的子节点,包括文本和注释节点。

 

1. 语法

.contents()

如果给定表示 DOM 元素集合的 jQuery 对象,.contents() 方法允许我们检索 DOM 树中的这些元素的直接子节点,并用匹配元素构造新的 jQuery 对象。.contents() 和 .children() 方法类似,不同的是前者在结果 jQuery 对象中包含了文本节点以及 HTML 元素。

.contents() 方法也可以用于获得 iframe 的内容文档,前提是该 iframe 与主页面在同一个域。

请思考下面这个带有一些文本节点的

,每个节点被两个折行元素 (
) 分隔:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

我们可以使用 .contents() 方法来把文本块转换为形式良好的段落:

$('.container').contents().filter(function() {
  return this.nodeType == 3;
})
  .wrap('

') .end() .filter('br') .remove();

这段代码首先会接收

的内容,然后滤过其文本节点,将文本节点封装入段落标签中。这是通过测试元素的 .nodeType 属性实现的。该属性存有指示节点类型的数字代码;文本节点使用代码 3。内容会被再次过滤,这次针对
元素,这些元素会被移除。

 

2. 范例

找到段落中的所有文本节点,并用粗体标签包装它们。

$("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b>");</b>

jQuery 参考手册 遍历jQuery 参考手册 遍历

相关文章