选择容器内的所有以前的元素？

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'); 
});