How to insert background (picture) elements in a bulleted list, a url to which is written in the neighboring bulleted list

Question

There are two bulleted list. One attribute in data-img elements spelled li , url 's pictures which should be in the background elements of the second bullet. I wrote here such code, thinking that he runs across correctly, but it seems with each pass he turns to the first element li

 $(".views").each(function() { var bg = $(this).attr("data-img"); //alert(bg); $("ol.buttons li a").css({ background: "url(" + bg + ")" }) }) 

 .views { display: inline-block; position: relative; width: 30%; height: 50px; margin: 2px; background: #ccc; } li { list-style-type: none; /* Убираем маркеры */ } li.but { display: inline-block; position: relative; margin: 5px; width: 50px; height: 50px; border-radius: 50%; border: 1px solid red; text-align: center; } ol.buttons { text-align: center; } a { background-size: cover!important; width: 100%; height: 100%; display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <ul class="parent-view"> <li class="views" data-img="http://goodimg.ru/img/tsvetochek-risunok3.jpg"></li> <li class="views" data-img="http://agu-shop.ru/images/pink_flower_512x512.png"></li> <li class="views" data-img="http://www.raskraska.ru/counting/flower-bw.gif"></li> </ul> <ol class="buttons"> <li class="but"><a>1</a> </li> <li class="but"><a>2</a> </li> <li class="but"><a>3</a> </li> </ol> 

I know that even for is, but how it go through I can not understand ...

Answer 1

Try this jsfiddle :

$(".views").each(function() {
    var bg = $(this).attr("data-img");
    var self   = $(this),
    index  = self.index();

    $("ol.buttons li a:eq("+index+")").css(
    "background","url(" + bg + ")"
    )
})