使用JQuery将每个行文本换行到一个元素

Question

我有这个

<div class="mad-select">
<ul class="madSelect">
Hours
Days
Weeks
Months
</ul></div>

然后我想通过使用JQuery

来实现这一点

<div class="mad-select">
<ul class="madSelect">
    <li>Hours</li>
    <li>Days</li>
    <li>Weeks</li>
    <li>Months</li>
</ul></div>

我该怎么做？

Answer 1

您可以先访问<ul>中的文字然后拆分它们。之后，只需清除<ul>中的所有内容，然后添加<li>。

＆＃13;

＆＃13;

$(document).ready(function(){

var arr = $('.madSelect').html().split('\n');
$('.madSelect').empty();

$.each(arr, function( index, value ) {
  if ( index > 0 && index < arr.length - 1) 
    $('.madSelect').append("<li>"+arr[index]+"</li>");
});



});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mad-select">
<ul class="madSelect">
Hours
Days
Weeks
Months
</ul></div>

＆＃13;

＆＃13;

＆＃13;

编辑：

我从.text()更改为.html()，因为如果您只有文字，则.html()比.text()快〜2倍。