Фон (картинка) у элементов маркированного списка, адрес на которые прописан в соеднем

[engenes]

Есть два маркированных списка. У одного в атрибутах "data-img" элементов li прописаны url'ы картинок, которые должны стать фоном у элементов второго маркированного списка. написал вот такой код, думал что он перебегает корректно, но похоже при каждом проходе он обращается к первому элементу 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>

вот ссылка на то как это выглядит (https://jsfiddle.net/nb5ogsgL/2/)

[destus]

А почему здесь нет некого перебора?
$("ol.buttons li a").css({
background: "url(" + bg + ")"
Вы же всем элементам ol.buttons li a присваиваете один и тот же url.

[рони]

engenes, если нужен конкретный элемент, выбирайте его а не все хором
https://jsfiddle.net/nb5ogsgL/3/

[рони]

присваиваете один и тот же url.
наверно надо уточнить , сначала всем "ol.buttons li a" присваивается значение первого li class="views" и потом всем нижнего значение второго и т.д.