如何获得 JQuery 元素的 html 内容的数组？

Question

我想要一系列元素的内部html。这是我试过的：

slides = $("#slides p");

它给了我一系列对象，但我想要每个对象的原始 html！我试过 $("#slides p").html() 但它给出了第一段。

Answer 1

您可以获取集合，将其转换为数组 .toArray and then use .map 以对其进行迭代并获取每个项目的内部 HTML。

const ptext = $('#slides p').toArray().map(p => p.innerHTML);
console.log(ptext);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slides">
  <p>Peter</p>
  <p>Ray</p>
  <p>Egon</p>
  <p>Winston</p>
</div>

Answer 2

这将为您提供一个字符串数组。每个字符串元素包含一个段落的 innerHTML：

slides = $.makeArray($("#slides p").map(p=>p.innerHTML));

由于 .map() 仍然 return 一个 jquery 对象，makeArray() 将其转换为数组。

Answer 3

根据 documentation page，.html() 只有 returns 您的选择器匹配的集合中第一个元素的内容。

如果您有多个 p 元素并且您需要每个元素的内容，那么您需要迭代它们：

var slides = $("#slides p");
slides.each(function(i, el) {
  console.log(el.innerHTML);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slides">
  <p>A</p>
  <p>B</p>
  <p>C</p>
  <p>D</p>
</div>

如何获得 JQuery 元素的 html 内容的数组？

How can I have an array of the html content of a JQuery element?

arrays

jquery

innerhtml