使用 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伪class和函数符号来做到这一点。所以这将像：

: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)" ) Select 匹配集合中索引小于 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);
  }
});

Example on Codepen

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

Get first three child elements of parent with jQuery

javascript

jquery

jquery-selectors