获取div中的前三个元素

Question

我想得到一个div中的前3个元素，所以e1，e2和e3。

<div id="parent">
    <div id="e1">element 1</div>
    <div id="e2">element 2</div>
    <div id="e3">element 3</div>
    <div id="e4">element 4</div>
</div>

我想用JavaScript和jQuery来做这个，但我不知道怎么做。

Answer 1

其实 你可以这样做 nth-child 伪类 用函数符号表示。因此，它的工作原理是这样的。

:nth-child(-n+3)
Represents the first three elements. [=-0+3, -1+3, -2+3]

其中函数式表示列表中的元素，其指数与自定义数字模式中的元素相匹配，定义为： An+B，其中。 A 是一个整数步长。 B 是一个整数偏移量。 n 是所有正整数，从 0.

所以你的最终代码会是这样的。

const elements = document.querySelectorAll('#parent > div:nth-child(-n+3)')

elements.forEach(element => {
   console.log(element.id)
})

<div id="parent">
  <div id="e1">element 1</div>
  <div id="e2">element 2</div>
  <div id="e3">element 3</div>
  <div id="e4">element 4</div>
</div>

---

但是... 如果你想坚持使用jQuery本身，你可以使用 jQuery :lt() 而不是。哪儿 jQuery( ":lt(index)" ) 选择索引小于以下的所有元素 index 匹配集内

输出将是这样的。

const elements = $('#parent > div:lt(3)')

jQuery.each(elements, function (index, element) {
    console.log(element.id)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="parent">
  <div id="e1">element 1</div>
  <div id="e2">element 2</div>
  <div id="e3">element 3</div>
  <div id="e4">element 4</div>
</div>

Answer 2

你可以使用jQuery的 .each() 函数和一个带有函数索引的小条件if语句......

 $('#parent').children().each(function(index){
  // To counteract the zero-based index.
  index++
  if (index < 4) {
    console.log(this);
  }
});

在Codepen上的例子