.prev(选择器)不工作

Question

这是问题(实时复制):

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.

像这样(实时复制):

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

在那里我使用first(函数)而不是:first(选择器).反直觉(对我而言),它更快,因为它可以将prevAll部分交给大多数浏览器中的本机代码(更多的是在其他SO问答中),但前提是我们不使用特定于jQuery的扩展:first.

要理解为什么prev定义它的方式,你必须记住基于集合的 jQuery是如何定义的.查看整个元素prev集,如果它与给定的选择器匹配,则返回每个元素的直接兄弟的新集合.例如,考虑这个(实时副本):

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说事实并非如此.)