如何在项目符号列表中插入背景（图片）元素，在相邻项目符号列表中写入的URL

Question

有两个项目符号列表。 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>

我知道即使是for，但是如何通过我无法理解......

Answer 1

尝试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 + ")"
    )
})