選擇以前的父母jQuery的孩子

最近我一直在使用CSS和jQuery在動畫中嘗試我的手，但它進行得很順利，但是現在我想做更多。也就是說，一旦用戶點擊信息應該顯示在圖像的頂部。選擇以前的父母jQuery的孩子

目前，我只有幾個標籤，我在其上執行動畫和類切換。

我的問題是，我已經想過做以下幾點：

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

這將每幅圖像，這意味着我將有其中約5不同的圖像來完成。

但是，我不知道如何去選擇類「actualImage」的前一個元素。

有沒有人有任何建議？

謝謝

來源

2014-07-09 user3791979

查看jQuery的[Tree Traversal API]（http://api.jquery.com/category/traversing/tree-traversal/）。 –

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

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

Fiddle

來源

2014-07-09 19:23:58

我試着用下面的語法：$（this）.prev（「。actualImage」）;但它似乎沒有工作 – user3791979

試試這個：

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

來源

2014-07-09 19:26:25

我不知道爲什麼你嘗試選擇以前元素，但你可以做類似這樣的事情：

將函數綁定到第e元素包含您的圖像和標題。
- 在此功能中，切換標題。
- 此外，將點擊事件處理程序綁定到主體以檢測包含元素的點擊「關閉」。

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/

來源

2014-07-09 19:50:34

選擇以前的父母jQuery的孩子

回答

相關問題