javascript - Unordered list and dynamic bullet images -

here's problem:

i have unordered list generates items. know can change bullet image using list-style-image: url();.

i want able dynamically add pre-existing image each list item, let's based on list item id.

any thoughts?

thanks

i'd use data attribute rather id , assign background image rather using bullet points have more control on display of images...

$('.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>