選擇容器內的所有以前的元素？

Question

我有這樣的代碼：

<div id="whatever"> 
    <span>1</span> 
    <span>2</span> 
    <span>3</span> 
    <span>4</span> 
</div> 
<div id="whatever2"> 
    <span>1</span> 
    <span>2</span> 
    <span>3</span> 
    <span>4</span> 
</div> 

我需要用jQuery選擇從我懸停同一div內的一個以前所有的跨度。

有誰知道我能做到這一點？

Answer 1

您可以使用prevAll()來實現此目的。

prevAll（） - 獲取匹配的 元素集合中每個元素的所有前面的同胞元素，可以通過選擇器進行過濾。

這裏是一個jsFiddle的例子。

---

下面是這個例子的代碼：

的jQuery：

$('span').hover(function(){ 
    $(this).prevAll().toggleClass('previous'); 
}); 

CSS：

.previous { 
    color:red; 
} 

Answer 2

var span = $('div').prev().children('span'); 

Answer 3

你會使用jQuery的prev()方法來選擇前一個元素。在這種情況下，#whatever是#whatever2的上一個元素。

$('#whatever2').prev(); 

要選擇內的元素，那麼你只需使用jQuery的children()方法：

$('#whatever2').prev().children(); 

要做到這一點就在#whatever分隔跨度的懸停，你可以使用：

$('#whatever2').on('mouseover', 'span', function() { 
    var $parent = $(this).parent(); // #whatever2 
    $parent.prev().children(); // The span elements within 
}); 

編輯：基於對另一個答案的評論我誤解了這個問題。這個答案與任何想要在前一個容器中選擇所有元素的人有關。

Answer 4

看看這裏我已經做了的jsfiddle http://jsfiddle.net/4DmqU/

代碼是在這裏

HTML -

<div id="whatever"> 
<span>1</span> 
<span>2</span> 
<span>3</span> 
<span>4</span> 
</div> 
<div id="whatever2"> 
<span>1</span> 
<span>2</span> 
<span>3</span> 
<span>4</span> 
</div> 

CSS -

span{ 
width:100px; 
height:20px; 
background :#ccc; 
float:left; 
margin: 10px; 
} 

JS -

$('span').hover(function(){ 
$(this).prevAll('span').css('background','#000'); 
});