首页
话题
消息
手册
我的
返回介绍

.contents()

发布于 2017-09-11 字数2962 浏览 1077 评论 0

所属分类:遍历 > 其它遍历

.contents()返回: jQuery

描述: 获得匹配元素集合中每个元素的子元素,包括文字和注释节点。

  • 添加的版本: 1.2.contents()

    • 这个方法不接受任何参数

给定一个jQuery对象,表示一个DOM元素的集合,.contents()方法允许我们在 DOM 树中查找集合中的直接子元素,并根据匹配的元素创建一个新的 jQuery 对象。.contents().children()方法类似,只不过前者包括文本节点以及jQuery对象中产生的HTML元素。

如果IFRAME是在与主页同域,.contents()方法也可用于获取iframe中的文件内容。

考虑一个简单<div>中一些文本节点,其中每个元素是相隔两换行符(<br /> ):

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

我们可以使用.contents()方法将上述文本转换成三个格式良好的段落:

$('.container').contents().filter(function() {
  return this.nodeType == 3;
})
  .wrap('<p></p>')
.end()
.filter('br')
  .remove();

此代码首先检索<div class="container">的内容,然后过滤它的文本节点,并且将它被包裹在段落标记内。这是通过测试元素的.nodeType属性。这个DOM属性保存一个数字代码,以显示节点的类型;文本节点使用代码3。再次过滤的内容,这次是<br />元素,这些元素都将被删除。

例子:

Example: 段落内找到所有的文本节点,并将他们包装了一个标记。

<!DOCTYPE html>
<html>
<head>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <p>Hello <a external-link="true" href="http://ejohn.org/">John</a>, how are you doing?</p>
<script>$("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");</script>
 
</body>
</html>

Example: 改变背景颜色的iframe里面的链接。

<!DOCTYPE html>
<html>
<head>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <iframe src="http://api.jquery.com/" width="80%" height="600" id='frameDemo'></iframe> 
<script>$("#frameDemo").contents().find("a").css("background-color","#BADA55");</script>
 
</body>
</html>

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!