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

Question

我有一堆缩略图。 其中我知道我的JQuery脚本中的link -但是，我需要从.caption获取HTML，而我只是不能使它这样做。

我尝试了以下方法

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

这是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

这也可以工作，因为.caption是您的a的兄弟姐妹：

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

为什么你不工作：

$(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

尝试：

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

jsFiddle示例

单击图像时，需要使用.closest()向上移动到包含div的位置，并使用find返回到.find()的标题。

Answer 3

您可以尝试：

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

Answer 4

尝试这个：

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

也许

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

尽管这些可能会给您整个课程。 考虑过添加ID？ 在使用Razor引擎之前，我已完成此操作：

 @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>  
 }