選擇上一個父級jQuery的子級

Question

最近，我一直在嘗試使用CSS和jQuery制作動畫，但是效果很好，但是，現在我想做的更多。 也就是說，一旦用戶單擊信息，信息應顯示在圖像頂部。

目前，我只有幾個標簽可以在其中執行動畫和類切換。

我的問題是，我考慮過要進行以下操作：

<div class= "singleImage">
    <img src.... class="actualImage">
    <p>text to put over the image</p>
</div>

這將針對每個圖像進行，這意味着我將有大約5個具有不同圖像的圖像。

但是，我不知道如何選擇類“ actualImage”的上一個元素。

有沒有人有任何建議？

謝謝

Answer 1

使用jQuery prev函數。 示例：假設您要選擇第二張圖像之前的圖像：

var foo = $(".singleImage").eq(1);
var bar = $(foo).prev().find('.actualImage');

小提琴

Answer 2

嘗試這個：

$('singleImage').children('.actualImage').prev();

Answer 3

我不確定為什么要嘗試選擇上一個元素，但是可以執行以下操作：

• 將函數綁定到包含圖像和標題的元素的click事件。
  • 在此功能內，切換標題。
  • 同樣，將click事件處理程序綁定到主體以檢測單擊“關閉”包含元素的情況。

HTML：

<a href="#" class="has-caption">
    <img src="http://placehold.it/300x300" />
    <span class="caption">This is a caption</span>
</a>

CSS：

a.has-caption { position: relative; }
a.has-caption .caption {
    background: rgba(0, 0, 0, .25);
    bottom: 0;
    color: #fff;
    display: none;
    height: 20px;
    left: 0;
    line-height: 20px;
    position: absolute;
    width: 100%;
}
a.has-caption img { vertical-align: bottom }

的JavaScript

$('a.has-caption').on('click', function(e) {
    e.preventDefault(); e.stopPropagation();
    var self  = $(this)
      , tmpId = 'toggle-' + Date.now();
    self.addClass(tmpId);
    $('span.caption', self).toggle();
    $('body').one('click', function(e) {
        if (!$(event.target).closest('.' + tmpId).length) {
            $('span.caption', '.' + tmpId).hide();
            self.removeClass(tmpId);
        };
    });
});

http://jsfiddle.net/83s7W/