Есть два маркированных списка. У одного в атрибутах "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>
вот ссылка на то как это выглядит
