javascript - 无序列表和动态元素符号图像

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>