将 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 是一个元素实例。因此，为了调用html()，您需要通过$(this) 将其设为jQuery 实例。试试下面的代码。

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>

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 返回一个本地 DOM 元素，而 $(this) 将返回其等效的 jQuery 元素。由于.html() 是一个jQuery 方法，它只适用于jQuery 元素，而不适用于原生DOM 元素。因此，要获取元素的 HTML，您必须使用 this.innerHTML 或 $(this).html()。

但是；它仍然不会产生您期望的结果。要推送子元素的完整 HTML，您需要推送它们的 outerHTML。

TLDR;使用 this.outerHTML 推送原生 DOM 元素的 HTML，您将获得预期的结果：

$("#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>