Question

这是问题（live copy ）：

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的：

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

似乎当我$(selector).prev(.className)或$(selector).prev(tag.className)时，我得到一个空集。这有什么问题？

Answer 1

prev只回顾一个兄弟，并返回包含该兄弟的集合（如果它与选择器匹配），或者返回空集合（如果它不匹配）。您需要prevAll，它会在兄弟姐妹中向后搜索以查找匹配项，可能会与first或:first结合使用。

像这样（live copy）：

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

我使用过first（函数）而不是:first（选择器）。反直觉（对我来说），它更快，因为它可以将prevAll部分移交给大多数浏览器中的本机代码（更多地在this other SO question and answer中），但前提是我们不使用特定于jQuery的像:first这样的扩展程序。

要理解为什么prev按照它的方式定义，你必须记住基于集合的 jQuery是怎样的。查看整个元素集，prev返回一组新的每个的直接兄弟，只要它与给定的选择器匹配。例如，考虑这个（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的：

jQuery(function($) {

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

});

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

当你处理单个元素时，

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

Answer 2

您正在寻找$(selector).prevAll('.className:first');

.prev()仅检查前一个元素是否与选择器匹配。

.prevAll()选择所有以前的兄弟姐妹，您想要选择该列表中的第一个元素，这也是我添加:first的原因。

http://jsfiddle.net/Paulpro/vWafe/2/

Answer 3

所有答案都很好，但我想与您分享我是如何使用它的

假设你有两个选择器a.ref, sup

如果您使用first()，您将首次出现选择器a.ref或sup

如果我想首次出现两个选择器a.ref该怎么办？和sup

这里我是如何解决它的

var prev_author_selector_to_remove="a.ref, sup";
if(prev_author_selector_to_remove) {
            prev_author_selector_to_remove.split(",").forEach(function (singleSelector) {
                $authorNames.eq(i).prevAll(singleSelector).first().addClass("hidden");
            });
        }

和另一件事

如果您想要all previous（不是第一个）until（并非全部），您会发现selector to stop

这是它

var prev_author_selector_to_remove="a.ref, sup";
var stop_selector=".author"
if(prev_author_selector_to_remove) {
            prev_author_selector_to_remove.split(",").forEach(function (singleSelector) {
                $authorNames.eq(i).prevUntil(stop_selector,singleSelector).addClass("hidden");
            });
        }

同样适用于next()

var next_author_selector_to_remove=".defaultSize";
var stop_selector=".author"
if(next_author_selector_to_remove) {
            next_author_selector_to_remove.split(",").forEach(function (singleSelector) {
                $authorNames.eq(i).nextUntil(stop_selector,singleSelector).addClass("hidden");
            });
        }

希望我的案例可以帮助你

.prev（选择器）不工作

3 个答案: