使用 jQuery.each 包装和附加数组元素答案

【问题标题】：Wrapping and appending an array-element by using jQuery.each使用 jQuery.each 包装和附加数组元素
【发布时间】：2011-06-27 14:21:57
【问题描述】：

我正在为此毁掉自己。不是必须有经验的 ind js。但这应该很简单吧？

我想将我的“arr”数组中的每个元素包装在<div class="mongol"></div> 中，并将其附加到div#testBox。我使用jQuery.each 这样做，但我什么也没得到：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type='text/javascript'>
  var arr = ["one", "two", "three", "four", "five"]

  jQuery.each(arr, function() {
    $(this).append("#testBox").wrap("<div class='mongol'></div>");
  });
</script>

如果我在我的 jQuery.each 函数中使用 alert(this)，那么它会很好地提醒每个元素。我不明白。

我想要达到的目标：

<div id="testBox>
    	<div class=" mongol ">one</div>
    	<div class="mongol ">two</div>
    	<div class="mongol ">three</div>
    	<div class="mongol ">four</div>
    	<div class="mongol ">five</div>
    </div>

【问题讨论】：

标签： javascript jquery append each

【解决方案1】：

您是否将append() 与appendTo() 混淆了？您发布的代码会将testBox 元素附加到您的每个数组项，这可能不是您想要的（并且无论如何都不会工作）。试试：

jQuery.each(arr, function(index, item) {
    jQuery("<div class='mongol'></div>").text(item).appendTo("#testBox");
});

【讨论】：

这会触发一个错误：Uncaught TypeError: Object has no method 'appendTo' (?) 但是这个呢？ $(this).wrap("
").appendTo("#testBox");
@Jonas，奇怪，应该可以。 text() 返回 jQuery 对象，因此应该可以在结果上调用 appendTo()。我会调查的。另外，我认为您的建议不会奏效：$(this) 将尝试匹配标签名称与您的数组项相同的元素（即无）。
这很奇怪。我不知道它是否是 jquery.each 的事情。但我的问题现在已经回答了。非常感谢你的帮助。乔纳斯 :)
@Jonas，知道了，this 在调用jQuery() 后被重新映射。使用显式参数修复它。答案已相应更新。
是的，成功了 :) 一个简单问题的双重解决方案是两倍好。谢谢

【解决方案2】：

var arr = [ "one", "two", "three", "four", "five" ]
    jQuery.each(arr, function(index, value) {
    $("#testBox").append("<div class='mongol'>" + value + '</div>');
 });

如果您的站点中有这样的

，则可以使用

<div id="testBox"></div>

【讨论】：

酷！对不起 console.log() :)
哈哈没关系。甚至不知道我的存在，所以现在我有了另一个调试工具。 2 x 谢谢 :)
哦，调试javascript总是使用console.log()和firebug否则你不能循环抛出东西等等......