How do I retrieve text from a span tag inside a selected href tag?

Question

I'm trying to retrieve the text from a span elementinside a selected href tag. Here is my HTML from a previous example:

<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"/>

My jQuery looks like this

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

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

Once an item is selected I add a class called: 'highlight'

Answer 1

你只需要一个简单的类选择器：

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

Answer 2

You shold change your code to:

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

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

The :selected pseudoclass is not applied to span elements.

The $(". gifttitle ", this) means select the element with class gifttitle in current element.

Answer 3

var test = $（'。highlight> .gifttitle'）。text（）;