javascript - 使用 JQuery append() 方法创建列表？

Question

我想为饼图创建图例。我正在使用列表来创建图例。我正在使用 ajax 请求动态创建列表，并使用 JQuery.append() 创建列表。

我的 HTML 部分是:

<ul class='tab' id='list1'></ul>

我的 CSS 部分是:

.color {
width: 20px;
height: 14px;
display: inline-block;
}
.tab, .tab li {
margin: 6px;
padding: 0;
}
.tab {
list-style: none outside none;
width: auto;
height: 230px;
overflow-x: auto;
overflow-y: auto;
margin-top: 30px;
}
.tab li {
border: solid 1px;
font-size: 11px;
margin-bottom: 10px;
float: left;
text-align: left;
font-weight: normal;
display: inline;
height: 14px;
/*width: 600px;*/
background: none!important;
}

我的脚本部分是:

$(document).ready(function () {
var a = "10";
for (var i = 0; i < 30; i++) {

    var color = $('<span>').addClass('color').css({
        backgroundColor: '#123AAB'
    });
    var ul = $('#list1').append($('<li></li>').append($('<ul></ul>')));
    ul.append($('<li>').append(color));
    ul.append($('<li>09</li>'));
    ul.append($('<li>jkhjkhjkfhjksfhdfjkdfhjdfsjkhjkfhjfksdhj</li>'));
}
});

JSFiddle 链接:

JSFiddle

我希望我的列表为:

<ul>
   <li>
      <ul>
         <li>List1</li>
         <li>List1</li>
         <li>List1</li>
      </ul>
      .
      .
      .
      and so on...
  </li>
</ul>

Answer 1

您为每个图例点添加 li 3 次...试试看:

$(document).ready(function () {
    var a = "10";
    for (var i = 0; i < 30; i++) {
        $('#list1').append($('<li><span class="pieshare"></span>' + a + ' Hellooooooooooo</li>', {
            'style': "width: 100px;"
        }));
    }
});

风格:

.pieshare{
    display: inline-block;
    width:20px;
    height:20px;
    background-color:#987654;
}