Как получить массив содержимого html элемента JQuery?

Question

Я хочу иметь внутренний html из серии элементов. Вот что я попробовал:

slides = $("#slides p");

Это дает мне серию объектов, но я хочу необработанный HTML каждого из них! Я пытался $("#slides p").html(), но он дает первый абзац.

Answer 1

Вы можете получить коллекцию, преобразовать ее в массив с помощью .toArray, а затем использовать .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

Согласно странице документации , .html() возвращает только содержимое первого элемента в наборе, которому соответствует ваш селектор.

Если у вас есть несколько 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>

Answer 3

Это даст вам массив строк. Каждый строковый элемент содержит innerHTML абзаца:

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

Поскольку .map() по-прежнему возвращает объект jquery, makeArray() преобразует его в массив.