2016-04-06 16 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> 
関連する問題