2016-04-06 41 views
4

我試圖通過使用$('.container').text()從HTML獲取所有文本而沒有任何標籤。我得到的文本與重複部分不同,而不是明文。jquery函數的錯誤工作.text()

這裏是我的HTML代碼:

<div class="v highlighted" id="4"> 
    <span class="vn" id="4">4</span> 
    <span class="p">Text-0</span><br> 
    <span class="p"> 
     <span class="wj"> 
      Text-1 
      <span class="w">Text-2</span> 
      Text-3 
     </span> 
    </span><br> 
</div> 

<script> 
    console.log($(".highlighted :not(.vn)").text()); 
</script> 

在控制檯中我看到這樣的結果:

Text-0Text-1Text-2Text-3Text-1Text-2Text-3Text-2 

是否有人知道爲什麼會發生?

+0

輸出似乎是正確的。你在期待什麼? –

+0

我在等待Text-0Text-1Text-2Text-3 – Dmitry

+0

請參閱Quentin的答案,以全面瞭解這裏發生的事情,以及如何獲得您想要的結果。 –

回答

10

看看.highlighted :not(.vn)匹配什麼。

它匹配:

  • <span class="p">Text-0</span>
  • <br>
  • <span class="p"><span class="wj">Text-1<span class="w">Text-2</span>Text-3</span></span>
  • <span class="wj">Text-1<span class="w">Text-2</span>Text-3</span>
  • <span class="w">Text-2</span>
  • <br>

既然你和包含在跨度一些文本被包含在另一個跨度兩個那些跨距的選擇器匹配,將得到外跨度內跨度的(相同的)內容的內容。

您可能想在選擇器中使用子組合器(>)而不是子代組合器()。

.highlighted > :not(.vn) 
+0

忘記了這場比賽'文字-2' –

+0

非常感謝!有用。 – Dmitry

-1

它可以幫助你:

<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 

</head> 
<body> 

<div class="v highlighted" id="4"> 
<span class="vn" id="4">4</span> 
<span class="p">Text-0</span> 
<br> 
<span class="p"><span class="wj">Text-1<span class="w">Text-2</span>Text-3</span></span> 
<br> 
</div> 

<script> 
$(function() { 
    $(".highlighted span:not(.vn)").each(function(){ 
     console.log("--",$(this).text()); 
    }); 

}); 
</script> 
</body> 
</html>