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

Posted 2023-05-09

【中文标题】使用jQuery获取父级的前三个子元素

【英文标题】：Get first three child elements of parent with jQuery

【发布时间】：2020-09-04 16:17:51

【问题描述】：

我想获取 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 来做这件事。实现这一目标的最佳方法是什么？

【问题讨论】：

$('#parent').children().slice(0, 3).map(it => it.id)

你有没有尝试过？

【参考方案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>

【讨论】：

好吧，尽管我最近的答案连续被否决，我对此没有任何问题，但至少澄清一下并告诉我为什么？ :D

效果很好，解释也很好！谢谢。

【参考方案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