logo标签列表

如何使用jQuery在每个列表项后添加换行符或< br/>？

javascriptjquery
3
我有100个列表项，为了让它看起来更好看，我想在每个列表项的结尾添加一个换行标签。那么我应该如何使用JavaScript或jQuery实现呢？请保留HTML标记。
使用jQuery，您可以尝试以下代码：
```javascript $('li').after('
'); ```
这将在每个列表项之后添加一个换行标签。
请问您能否提供您的尝试？ - Adam Azad
你的意思是列表，是指无序列表和列表项吗？ - Mohammad Kermani
我是指在每个li之后。 - palak sharma
你应该使用CSS。 - avrahamcool
1
对于有效的HTML，您不能在li标签后添加换行标记。您可以将它们添加到li标签内部，但是不要在其后添加。理想情况下，CSS中的填充和边距就是为此而设计的。您应该尽量避免使用换行标记来创建空间。 - Scott
默认情况下，<li> 会换行，除非您或其他人已将 li 的 CSS 更改为类似于 display: inline-block; 的内容。 - user663031
2个回答
4

最好使用CSS，这个演示有100多个列表项，我用一种样式为每个列表项添加了间距。

片段

li { 
  margin-bottom:15px;
  }
<ol>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  </ol>

3
这里有一个简单的解决方案，我使用了 insertAfter (jquery) 来在每个 li 后插入 <br/>。 

$(function(){

  $("<br/>").insertAfter("li")
  
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>ITEM 1</li>  
  <li>ITEM 2</li>  
  <li>ITEM 3</li>  
  <li>ITEM 4</li>  
</ul>

但是，你不需要JavaScript来做到这一点，你可以通过CSS轻松实现。

ul > li{
  margin-top:25px;
}
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接