入れ子スパンのテキストをJQueryで取得する

Question

jqueryを使用してネストされたスパンのテキスト値を取得するのは苦労しています。私は次の構造を持っていると言うことができます：

<span class='token tag'> 
    <span class='token tag'> 
     <span class='token punctuation'> < </span> 
      div 
     </span> 
    ... 

私の目標は、テキストdivを取得することです。このパターンは開始タグのすべての名前に当てはまります。このパターンの後に一致する名前（すべてのdiv）を持つすべての要素を選択するように選択したいと思います。私は以下を持っています：

$(this.state.$html.filter('.token.tag:has(> .token.tag):has(> .token.punctuation).children()[3]).text() 

これはこれまで私の最高の試みでしたが失敗しました。

Answer 1

テキストを入れ子にしたスパンの内側に配置したいので、divのような他の要素を削除するように、spanタグで検索するのが良いでしょう。

同じクラスのネストされたdivがある場合は、選択されません。

var txt = $("span.token.tag > span.token.tag > span.token.punctuation").text() 
 
console.log(txt);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<span class='token tag'> 
 
    <span class='token tag'> 
 
    <span class='token punctuation'>div</span> 
 
    </span> 
 
</span> 
 

 
<div class='token tag'> 
 
    <div class='token tag'> 
 
    <div class='token punctuation'>div2</div> 
 
    </div> 
 
</div>

Answer 2

var div = $('.token').find('span.tag').children('span').text(); 
 
console.log(div)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class='token tag'> 
 
    <span class='token tag'> 
 
     <span class='token punctuation'>div</span> 
 
    </span> 
 
</span>

これを試してみてください。