.prev（选择器）不工作 [英] .prev(selector) not working

问题描述

问题在这里（实时副本）：

CSS：

div {
    border: 1px solid black;
}

HTML：

<div>.</div><br>
<div>.</div><br>
<div class="test">Should have a blue border</div><br>
<div>.</div><br>
<div>.</div><br>
<div>.</div><br>
<div>.</div><br>
<div>.</div><br>
<div>.</div><br>
<div>.</div><br>

JavaScript：

JavaScript:

$('div:last').css('border', '1px solid red')
    .prev('.test').css('border', '1px solid blue');

当我做 $（选择器）.prev（.className）时）或 $（选择器）.prev（tag.className）我得到一个空集。这有什么问题？

It seems that when I do $(selector).prev(.className) or $(selector).prev(tag.className) I get an empty set. What's wrong with this?

推荐答案

prev 只回顾一个兄弟，并返回包含该兄弟的集合（如果它与选择器匹配），或者返回空集合这不是一场比赛。您想要 prevAll ，向后搜索兄弟姐妹寻找比赛，可能结合 第一 或 ：首先 。

prev only looks back one sibling, and returns either a set containing that sibling if it's a match for the selector, or an empty set if it isn't a match. You want prevAll, which searches backward through the siblings looking for matches, possibly combined with first or :first.

像这样（实时副本） ：

$('div:last').css('border', '1px solid red')
    .prevAll('.test').first().css('border', '1px solid blue');

在那里我使用了第一个（函数）而不是：第一个（选择器）。反直觉（对我来说），它更快，因为它可以将 prevAll 部分移交给大多数浏览器中的本机代码（更多在这个其他的SO问答），但前提是我们不使用特定于jQuery的扩展名：首先。

There I've used first (the function) rather than :first (the selector). Counter-intuitively (to me), it's faster, since it can hand the prevAll part off to native code in most browsers (more in this other SO question and answer), but only if we don't use jQuery-specific extensions like :first.

了解 prev 定义的原因就这样，你必须记住基于集合的 jQuery是怎样的。查看整个元素集，上一页返回一组新的每个这些元素的直接兄弟，前提是它与给定的选择器匹配。例如，考虑一下（实时副本）：

To understand why prev is defined the way it is, you have to remember how set-based jQuery is. Looking at an entire set of elements, prev returns a new set of the immediate sibling of each of those elements provided it matches the given selector. So for instance, consider this (live copy):

CSS：

div {
  border: 1px solid black;
  margin-bottom: 2px;
}

HTML：

<div class="foo">foo</div>
<div class="bar">bar</div>
<div class="foo">foo</div>
<div class="bar">bar</div>
<div>not foo</div>
<div class="bar">bar</div>
<div class="foo">foo</div>
<div class="bar">bar</div>
<div>not foo</div>
<div class="bar">bar</div>
<div class="foo">foo</div>
<div class="bar">bar</div>

JavaScript：

JavaScript:

jQuery(function($) {

  $("div.bar")
    .css("background-color", "#ffffcc")
    .prev(".foo")
    .css("background-color", "#ccffcc");

});

初始 $（div.bar）匹配页面中不同位置的六个元素。我们设置他们的背景颜色，然后得到他们以前的兄弟姐妹如果那些兄弟姐妹有foo类;我们的新装置只有四个元素，因为前一个兄弟姐妹中只有四个有这个级别。然后我们将它们的背景设置为绿色。

The initial $("div.bar") matches six elements in different locations in the page. We set their background colors, and then get their previous siblings if those siblings have the class "foo"; our new set only has four elements, because only four of the immediate previous siblings had that class. Then we set their backgrounds to green.

prev 在处理单个元素时似乎很无用，但是当你从一个角度看待事物时，它的价值是有意义的。 （jQuery是如此基于集合，多年来我认为名称jQuery是因为它就像SQL [结构化查询语言]，它也是基于大规模设置的;但是Resig说情况并非如此。）

prev seems largely useless when you're dealing with individual elements, but its value makes sense when you look at things from a set perspective. (jQuery is so set-based that for ages I assumed the name "jQuery" was because it's like SQL [the Structured Query Language], which is also massively set-based; but Resig says that's not the case.)

这篇关于.prev（选择器）不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！