Question

这是我的问题：

我有一个生成一些项目的无序列表。我知道我可以使用list-style-image: url();将项目符号更改为图像。

我希望能够为每个列表项动态添加预先存在的图像，让我们根据列表项id说出来。

有什么想法吗？

由于

Answer 1

我可能会使用数据属性而不是ID并指定背景图像而不是使用项目符号，因为您可以更好地控制图像的显示......

$('.countries li').each(function() {
    var url = "http://www.sciencekids.co.nz/images/pictures/flags96/"
    var country = $(this).data('country');
    $(this).css('background-image', 'url(' + url + country + '.jpg)');
});

ul {
    list-style: none;
}

li {
    padding-left: 30px;
    background-position: 0 center;
    background-repeat: no-repeat;
    background-size: 20px 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="countries">
    <li data-country="United_Kingdom">UK</li>
    <li data-country="Germany">Germany</li>
    <li data-country="France">France</li>
    <li data-country="Spain">Spain</li>
</ul>

Answer 2

从uʍopǝpısdu获得一些有价值的反馈后，这就是我最终的结果并且有效：

$("#list1").append('<li class="list-group-item" id=' + country.name + '><span class="badge">' + country.points + '</span>'  + ' '  + country.name +' </li>' ); 
$("#" + country.name).css('background-image', 'url(../img/flags/squareflags/' + country.name + '.png)');

谢谢！

无序列表和动态项目符号图像

2 个答案: