Question

我有一个特殊类“地点”的跨度列表，其中一些有“激活”类。有没有办法选择“激活”类和最后一个类的第一个项目？

<span class="place" onclick="activate();">1</span>
<span class="place" onclick="activate();">2</span>
<span class="place activated" onclick="activate()">3</span>
<span class="place activated" onclick="activate();">4</span>
<span class="place activated" onclick="activate();">5</span>
<span class="place activated" onclick="activate();">6</span>
<span class="place" onclick="activate();">7</span>

Answer 1

var firstspan = $('span.activated:first'),
    lastspan = $('span.activated:last');

顺便说一句，如果您使用的是jQuery，那么所有内联点击事件是什么？

你可以像这样添加一些代码：

$('span.place').click(function() {
    activate(); // you can add `this` as a parameter
                // to activate if you need scope.
});

Answer 2

var places = $('span.place.activated');

var first = places.first(),
    last  = places.last();

说明：span.places.activated选择器将获得包含“地点”和“已激活”类的所有<span>个。然后first()和last()方法将返回该集合的第一个和最后一个项目。这比使用:first和:last伪选择器更可取，因为选择很昂贵，这样我们只选择一次，然后依靠（廉价）数组操作来获取第一个和最后一个元素。

Answer 3

如果您关注效果，请更好地使用$('span.place.activated')代替$('.activated:first')。但是，在这种情况下，第二个变体也是正确的。

Answer 4

var first = $('.activated:first');
var last = $('.activated:last');

使用jQuery选择具有特定类的第一个和最后一个元素

4 个答案: