如何使用jquery在每个列表项之后添加换行符或左？

Question

我有100个列表项，为了让它看起来更好我想在每个列表项结束后添加换行符。那我怎么能用javascript或jquery来做呢？

Answer 1

最好使用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>

Answer 2

这是一个简单的解决方案，我使用（jquery）在每个<br/>之后插入li

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