使用另一個元素獲取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>  
 }