javascript - .prev(选择器)不起作用

这是问题（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)时，我得到了一个空集。这怎么了

最佳答案

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中更多），但前提是我们不使用像。

要理解为什么:first是这样定义的，您必须记住基于集合的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");

});

初始prev匹配页面中不同位置的六个元素。我们设置它们的背景颜色，然后获得先前的兄弟姐妹（如果这些兄弟姐妹具有“ foo”类）。我们的新集合只有四个元素，因为之前的兄弟姐妹中只有四个具有该类。然后我们将其背景设置为绿色。

在处理单个元素时，$("div.bar")在很大程度上似乎毫无用处，但是从固定的角度看待事物时，它的价值才有意义。 （jQuery是基于集合的，以至于我多年来一直以为“ jQuery”是因为它就像SQL [结构化查询语言]一样，也是基于集合的；但是Resig表示并非如此。）

关于javascript - .prev(选择器)不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6825116/