Question

我想为Pie-Chart创建图例。我正在使用列表来创建传说。我正在使用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;
}

使用JQuery append（）方法创建列表？

1 个答案: