javascript - 選択した href タグ内の span タグからテキストを取得するにはどうすればよいですか?

Question

選択した href タグ内のスパン要素からテキストを取得しようとしています。前の例の HTML は次のとおりです。

<ul class="thumbnails">
<li>
    <a href="#" class="thumbnail">
        <img class="giftthumb" src='thumb1.jpg' alt="">
        <span class="gifttitle">Thumb1</span>
    </a>    
</li>
<li>
    <a href="#" class="thumbnail">
        <img class="giftthumb" src='thumb2.jpg' alt="">
        <span class="gifttitle">Thumb2</span>
    </a>    
</li>
<li>
    <a href="#" class="thumbnail">
        <img class="giftthumb" src='thumb3.jpg' alt="">
        <span class="gifttitle">Thumb3</span>
    </a>    
</li>
</ul>

<input type="button" class="btn btn-success" value="Test" id="capture"/>

私のjQueryは次のようになります

$('#capture').click(function(e) {
    e.preventDefault();

        var test = $(".highlight .gifttitle").text();       
    alert("TEXT " + test);
});

項目が選択されたら、'highlight' というクラスを追加します。

Answer 1

シンプルなクラス セレクターが必要です。

var test = $(".gifttitle.highlight").text();      

Answer 2

コードを次のように変更する必要があります。

$('#capture').click(function(e) {
    e.preventDefault();

    // var test = $(".gifttitle", this).text();      
    alert("TEXT " + test);
});

疑似クラスは要素:selectedに適用されません。span

手段は、現在の要素の$(". gifttitle ", this)クラスを持つ要素を選択します。gifttitle

Answer 3

var test = $('.highlight > .gifttitle').text();