使用另一个元素获取DIV的HTML

Question

I have a bunch of thumbnails. Of these I know the link in my JQuery script - however, I need to get the HTML from the .caption , and I just can't make it do that.

I've tried the following things

$('a.thumbnail').click(function() {
    $(this).closest('.caption').html()
    $(this).find('.caption').html()
    $(this).children('.caption').html()
});

Here's the HTML:

<div class="thumbnail">
    <a href="#" class="thumbnail">
        <img src="{{ URL::asset($item->image) }}" alt="">
    </a>
    <div class="caption" align="center">
        {{ $item->name }}
    </div>
</div>

Answer 1

This would also work, since the .caption is a sibling of your a :

$('a.thumbnail').click(function() {
    $(this).siblings('.caption').html();
});

Why yours don't work:

$(this).closest('.caption').html() // .caption is not an ancestor of the a
$(this).find('.caption').html()  // .caption is not a descendant of the a
$(this).children('.caption').html() // .caption is not a child of the a

Answer 2

Try:

$('a.thumbnail').click(function() {
    $(this).closest('div.thumbnail').find('.caption').html();
});

jsFiddle example

When you click the image, you need to use .closest() to traverse up to the containing div, and the use find to go back down to .find() the caption.

Answer 3

您可以尝试：

$(this).parent().find('.caption').html();

Answer 4

Try this:

$(".caption").text();

or Perhaps

$(".thumbnail").find(".caption").text();

Although these might give you the entire class. Have thought about adding ids? I've done this before using the Razor engine:

 @foreach (var temp in ListOfStuffWithIds)
 {
   <tr class="class" >
       <td class="tdClass" >
          <input id="@temp.Id" type="checkbox" /></td>
        <td class="tdClass2">@temp.Id</td>
        <td>@temp.Name</td>
    </tr>  
 }