$("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");
详细说明.contents()
我们可以使用 .contents() 方法来把文本块转换为形式良好的段落:<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>
$('.container').contents().filter(function() {
return this.nodeType == 3;
})
.wrap('<p></p>')
.end()
.filter('br')
.remove();
以下jQuery示例代码用于演示contents()函数的具体用法:<p id="n1">
Hello
<span id="n2">
CodePlayer
<span id="n3">A</span>
</span>
<!-- 注释内容 -->
<span id="n4">
B
<label id="n5"></label>
</span>
</p>
//返回jQuery对象所有匹配元素的标识信息数组
//每个元素形如:[文本内容]、[--注释内容--]或#id
function getTagsInfo($doms){
return $doms.map(function(){
if(this.nodeType == 3){ // 文本节点
return "[" + this.nodeValue + "]";
}else if(this.nodeType == 8){ // 注释节点
return "[--" + this.nodeValue + "--]";
}else{
return "#" + this.id;
}
}).get();
}
// 匹配n1元素所有的子节点(包括文本节点、注释节点等,下同)
var $n1_contents = $("#n1").contents();
document.writeln( getTagsInfo( $n1_contents ) ); // [ Hello ],#n2,[ ],[-- 注释内容 --],[ ],#n4,[ ]
//匹配span元素所有的子节点
var $span_contents = $("span").contents();
document.writeln( getTagsInfo( $span_contents ) ); // [ CodePlayer ],#n3,[ ],[A],[ B ],#n5,[ ]
// 匹配span元素所有子节点中的非Element节点
var $span_text = $span_contents.filter( function(){
return this.nodeType != 1;
} );
document.writeln( getTagsInfo( $span_text ) ); // [ CodePlayer ],[ ],[A],[ B ],[ ]
//匹配n5元素所有的子节点,n5标签中没有任何内容,因此返回空的jQuery对象,匹配0个元素
var $n5_contents = $("#n5").contents();
document.writeln( $n5_contents.length ); // 0
语法结构:
</>code
- $(selector).contents()
实例代码:
</>code
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset=" utf-8">
- <meta name="author" content="https://www.365jz.com/" />
- <title>contents()函数-365建站网</title>
- <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $("ul").contents().not("[nodeType==1]").css("color","red");
- })
- </script>
- </head>
- <body>
- <div>
- <ul>
- <li>html专区</li>
- <li>DIV+CSS专区</li>
- <li>Javascript专区</li>
- <li>Jquery专区</li>
- </ul>
- </div>
- </body>
- </html>
以上代码可以将ul元素下的文本节点的颜色设置为红色。
jquery的contents()访求可以获取iframe里面的元素,如
<iframe id="test" src="test.jsp"></iframe>
$("#test").contents().find("#testI");这句话的作用就是能够得到test.jsp里面的id为testI的节点
如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛