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 example

点击图片后，您需要使用.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>  
 }

使用其他元素获取DIV的HTML

4 个答案: