[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>

вот ссылка на то как это выглядит