javascript - 如何在标签关闭后插入\n？

Question

我的代码:

var add = $(items).find('li').each(function() {

    return $(this).append('\n');
});

这给了我以下 DOM 输出:

<li><a href="#"><img src="image1"></a></li>
<li><a href="#"><img src="image2"></a></li>
<li><a href="#"><img src="image3"></a>
</li><li><a href="#"><img src="image4"></a>
</li><li><a href="#"><img src="image5"></a>

我想要的是在 </li> 之后添加新行。标签。像这样:

<li><a href="#"><img src="image1"></a></li>
<li><a href="#"><img src="image2"></a></li>
<li><a href="#"><img src="image3"></a></li>
<li><a href="#"><img src="image4"></a></li>
<li><a href="#"><img src="image5"></a></li>

我意识到附加在这里不是正确的选择，但尝试使用 .after()和.before()也没有产生任何结果。事实上，这两种方法产生相同的输出:

<li><a href="#"><img src="image1"></a></li>
<li><a href="#"><img src="image2"></a></li>
<li><a href="#"><img src="image3"></a></li>
<li><a href="#"><img src="image4"></a></li><li><a href="#"><img src="image5"></a></li>

那么我怎样才能实现这个目标呢？

编辑:

这是示例php生成图像的代码。当然还有其他条件告诉何时关闭 ul并开始一个新的，但这就是在源代码中生成新行和图像之间的空格的原因:

echo '<li><a href="'.$image.'" ><img src="'.$thumb.'"/></a></li>'."\n";

如前所述，如果我删除 \n来自php ，那么就可以了，但是源代码是一行代码。

Answer 1

.append()在给定元素内部添加一个新元素。您想要.after() .

$(items).find("li").after("\n");

没有必要使用.each() ，DOM 修改方法会自动对集合中的所有元素进行操作。当使用.each()时您不需要返回任何内容，它总是返回原始集合。

请注意，在 <li> 之间添加换行符是没有意义的。元素，我认为它不会对列表的渲染产生任何影响。像这样的空白在 HTML 源代码中很有用，但与 DOM 无关。