javascript - 选择容器中的所有先前元素？

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

看看这里我做了一个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');
});

Answer 4

您将使用 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
});

编辑：基于对另一个答案的评论，我误解了这个问题。这个答案与任何想要选择前一个容器中的所有元素的人有关。