Question

i have a problem and I can’t understand what is happening.
I’m dealing with this problem for a few hours.

I’m trying to get the text from some DIVs after the li is clicked.

Here is the html of the ul list and the li:

<ul id="thumbsUL" runat="server" class="thumbs noscript">
    <li>
        <a class="thumb" name="leaf" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">
           <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" alt="Title #0" />
        </a>
        <div class="caption">
            <div class="image-title">Title #0</div>
            <div class="image-desc">Description</div>
        </div>
    </li>
</ul>

here is the script (one of the most i’ve tried):

$("#thumbsUL li").click(function () {
    var title = $(this).children(".caption").children(".image-title").text();
    alert(title);
});

the alert fire but without the text of the image title text.

1.what am i doing worng?

2.is there a better way then this to get the children?

3.is $(".selector").text() is the best way to get the content of the element text?

Answer 1

try this,

$("#thumbsUL li").click(function () {
    var title = $(this).find(".image-title").html();
    alert(title);    
});