javascript - 使用 jQuery 获取父元素的前三个子元素

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>

我想用 jQuery 来做到这一点。实现这一目标的最佳方法是什么？

Answer 1

实际上你可以用 nth-child 来做到这一点带有函数符号的伪类。所以这将像这样工作:

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

Where the functional notation represents elements in a list whose indices match those found in a custom pattern of numbers, defined by An+B, where: A is an integer step size, B is an integer offset, n is all positive integers, starting from 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>