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无关。

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

1 个答案: