выдвинуть потомков div в массив javascript

Question

У меня есть div с некоторыми дочерними элементами внутри него. Я пытаюсь перебрать div и протолкнуть каждого потомка в массив объектов, но не могу понять, как перебрать div.

Я пробовал

$("#id").children('div').each(function(){arrayName.push(this.html)}

без удачи. Вот что у меня есть.

$("#todocontentInner").children('div').each(function() { 
   oldContent.push(this.html());
            });

Я ожидаю, что oldcontent будет примерно таким же, как этот

["<div class="contentitem">Bob</div>", "<div class="contentitem">Joe</div"]

Answer 1

Просто чтобы очистить эфир: this возвращает собственный элемент DOM, тогда как $(this) вернет его эквивалентный элемент jQuery. Поскольку .html() является методом jQuery, он будет работать только с элементом jQuery, а не с собственным элементом DOM. Таким образом, чтобы получить HTML-код элемента, вам придется использовать либо this.innerHTML, либо $(this).html().

Однако;это все равно не даст ожидаемого результата. Чтобы передать полный HTML-код дочерних элементов, вам нужно будет нажать вместо них outerHTML.

TLDR;Вы получите ожидаемый результат, нажав HTML для нативного элемента DOM, используя this.outerHTML:

$("#id").children('div').each(function(){arrayName.push(this.outerHTML)})

Или, если вы действительно хотите использовать jQuery, вы получите тот же результат из $(this).prop('outerHTML'):

$("#id").children('div').each(function(){arrayName.push($(this).prop('outerHTML'))})

Рабочий образец можно посмотреть здесь:

let arrayName = []
$("#id").children('div').each(function(){arrayName.push(this.outerHTML)})
console.log("First approach: ", arrayName)

let arrayName2 = []
$("#id").children('div').each(function(){arrayName2.push($(this).prop('outerHTML'))})
console.log("Second approach: ", arrayName2)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="id">
  <div class="contentitem">Bob</div>
  <div class="contentitem">Joe</div>
</div>

Answer 2

Для этого вам не нужен jQuery:

const arr = [...document.querySelectorAll('#someID > div')].map(el => el.innerHTML);

console.log(arr);

<div id="someID">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Answer 3

Ваш код

$("#id").children('div').each(function(){arrayName.push(this.html)}

почти правильный. Проблема в том, что this.html ошибается. Вы можете использовать this.innerHTML, например

$("#id").children('div').each(function(){arrayName.push(this.innerHTML)}

, потому что this в этом контексте представляет элемент. Однако вы можете сделать это и в jQuery:

$("#id").children('div').each(function(){arrayName.push($(this).html)}

Answer 4

То, что вы делаете, правильно, за исключением того, что this является экземпляром элемента. Поэтому, чтобы вызвать html(), вам нужно сделать его экземпляром jQuery с помощью $(this). Попробуйте код ниже.

let arr = [];

$("#parent div").each(function() {
  arr.push($(this).html());
});

console.log(arr);

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div id="parent">
  <div>child 1</div>
  <div>child 2</div>
</div>