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

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

4 个答案: