jq选择器问题

Question

假如在dom中我有6个<span class="bbb"></span>;现在我要分别选择前面三个；怎么选中

Answer 1

似乎有点看错题了

--------以下是原答案--------

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
</div>

span:nth-child(-n+3){
    color: red;
}

:nth-child(an+b) 会匹配所有兄弟节点中位置位于an+b位置的元素。 其中 n 是从0开始的正整数。

虽然 n 是从0开始的正整数，但 a 其实可以取负值的。当我们将 a 取值为-1的时候，可以达到只选取前 b 个元素的目的。

Answer 2

$("span:lt(index)")
查查api就找到了

Answer 3

jq选择器选中多个会返回一个类似数组的对象，问题就变成了，怎么选择一个数组中的前三个元素。

$('span.bbb').slice(0,2);

Answer 4

如下 HTML

<span class="bbb">1</span>
<span class="bbb">2</span>
<span class="bbb">3</span>
<span class="bbb">4</span>
<span class="bbb">5</span>
<span class="bbb">6</span>

如下 JS

var spans = $('.bbb')
for (var i = 0; i < 3; i++) {
  console.log(spans[i])
}

Answer 5

:lt(index)选择器用于匹配所有小于指定索引的元素

$(".bbb:lt(3)")

Answer 6

关于选择器的问题，还是要看jQ文档，一者看“选择器”分类，再一看“遍历”分类，总能找到需要的。

jQuery API 中文文档

Answer 7

原生接口(querySelctorAll):
document.querySelectorAll('span:nth-child(-n+3)');

jQuery:
$("span:lt(3)");