javascript - .prev(选择器)不工作

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 , 它向后搜索 sibling 以寻找匹配项，可能与 first 结合使用或 :first .

像这样 ( live copy ):

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

我在这里使用了 first(函数)而不是 :first(选择器)。与直觉相反(对我而言)，它更快，因为它可以将 prevAll 部分交给大多数浏览器中的 native 代码(更多信息在 this other SO question and answer 中)，但前提是我们不使用 jQuery-特定的扩展，例如 :first。

要理解为什么 prev 是这样定义的，您必须记住 set-based jQuery 是如何定义的。查看整个元素集，prev 返回这些元素的 each 直接兄弟的一组新元素，前提是它与给定的选择器匹配。例如，考虑这个 ( 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") 匹配页面中不同位置的六个元素。我们设置它们的背景颜色，然后获取它们之前的 sibling 如果那些 sibling 有类“foo”；我们的新集合只有四个元素，因为前一个 sibling 中只有四个有那个类。然后我们将他们的背景设置为绿色。

prev 在您处理单个元素时似乎基本上没有用，但当您从集合的 Angular 来看事物时，它的值(value)就有意义了。 (jQuery 是如此基于集合，以至于多年来我一直认为“jQuery”这个名字是因为它就像 SQL [结构化查询语言]，它也是大量基于集合的；但 Resig 说情况并非如此。)