jquery獲取指定節點的第一級文字節點

antzone發表於2017-03-22
jQuery

本章節介紹一下如何獲取指定節點下所有文字節點的內容，希望能夠給需要的朋友帶來一定的幫助。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
.in_search{ 
  border:1 none; 
  color:#999999; 
  font-size:12px; 
  height:15px; 
  line-height:15px; 
  width:180px; 
} 
</style> 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#show").text($("#box").text())
})
</script>
</head>
<body>
<div id="show"></div>
<div id="box">分享互助<a href="#">螞蟻部落歡迎您</a></div>
</body>
</html>

上面的程式碼可以獲取文字節點，但是不光是一級文字子節點，還會把子節點的文字節點也一併獲取過來，但是有時候，我們只想獲取box元素的下的一級文字子節點，程式碼修改如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
.in_search{ 
  border:1 none; 
  color:#999999; 
  font-size:12px; 
  height:15px; 
  line-height:15px; 
  width:180px; 
} 
</style> 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var text=$("#box").contents().filter(function() {
    return this.nodeType === 3;
  }).text();
  $("#show").text(text)
})
</script>
</head>
<body>
<div id="show"></div>
<div id="box">分享互助<a href="#">螞蟻部落歡迎您</a></div>
</body>
</html>

上面的程式碼實現了我們的要求，只會獲取box元素的一級文字子節點，程式碼比較簡單，具體可以參閱相關閱讀。

相關閱讀:

1.contents()函式可以參閱jQuery contents()一章節。

2.filter()函式可以參閱jQuery filter()一章節。

3.nodeType屬性可以參閱js nodeType一章節。

相關文章