从jQuery中的父元素内部获取前（n）个元素答案

【问题标题】：Get First (n) Elements From Inside a Parent Element in jQuery从jQuery中的父元素内部获取前（n）个元素
【发布时间】：2021-10-30 11:04:42
【问题描述】：

我正在尝试从父 div 中获取前 4 个元素。使用 slice 时，它会返回我的 div 中的所有子元素。

我的 jQuery：

var upperText = jQuery(".entry-text").slice(0,4).html();

HTML

<div class="entry-text">
<h1>Lorem ipsum dolor sit amet consectetuer adipiscing 
elit</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit. Aenean commodo ligula eget dolor. Aenean massa 
<strong>strong</strong>. Cum sociis natoque penatibus 
et magnis dis parturient montes, nascetur ridiculus 
mus.</p>
<h1>Lorem ipsum dolor sit amet consectetuer adipiscing 
elit</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit. Aenean commodo ligula eget dolor. Aenean massa. 
</p>
<h2>Aenean commodo ligula eget dolor aenean massa</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit. Aenean commodo ligula eget dolor. Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient 
montes, nascetur ridiculus mus. Donec quam felis, 
ultricies nec, pellentesque eu, pretium quis, sem.</p>
</div>

例如，在上面的 HTML 示例中，我只希望通过第二个段落标记的所有内容。

【问题讨论】：

您正在切片“.entry-text”元素的集合，而不是其中的元素。

标签： jquery css-selectors

【解决方案1】：

我相信 .entry-text.children() 会返回一个元素的子元素

var upperText = $(".entry-text").children().slice(0, 4);

【讨论】：

不完全正确的答案，html 只会返回第一个元素的文本
谢谢，刚刚运行代码并确认了这一点。现在删除 .html() 似乎返回了前四个孩子。

【解决方案2】：

您的代码正在过滤您选择的元素，它与子元素无关。如果你想要 HTML，最简单的做法是克隆元素并删除你不想要的元素。

const html = $(".entry-text").clone().find("> *:gt(3)").remove().end().html();
console.log(html);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="entry-text">
  <h1>Lorem ipsum dolor sit amet consectetuer adipiscing elit
  </h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa
    <strong>strong</strong>. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </p>
  <h1>Lorem ipsum dolor sit amet consectetuer adipiscing elit
  </h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
  </p>
  <h2>Aenean commodo ligula eget dolor aenean massa</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem.</p>
</div>

【讨论】：

这符合我的目的，而且是我从未想过要做的一种方式。谢谢！