如何遍历列表并添加图像

Question

我有一组包含 6 张图像的工件。

var artifacts = [
  'http://placehold.it/50x150',
  'http://placehold.it/100x125',
  'http://placehold.it/150x100',
  'http://placehold.it/200x50',
  'http://placehold.it/150x75',
  'http://placehold.it/100x100'
];

我正在尝试将工件作为背景图像添加到列表中的每个列表项。

<ul class="slick-dots">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

如果列表中的工件数量超过它的数量，它将从开头开始，并将工件添加到数组的 [0] 位置。

出于某种原因，我不知道应该如何使用 javascript 来解决这个问题。

Codepen：http://codepen.io/H0BB5/pen/MJYgdz

Answer 1

将css() 方法与内部迭代的回调一起使用。其中第一个参数是索引，并根据该值从数组中获取值以生成 css 属性值。

var artifacts = [
  'http://placehold.it/50x150',
  'http://placehold.it/100x125',
  'http://placehold.it/150x100',
  'http://placehold.it/200x50',
  'http://placehold.it/150x75',
  'http://placehold.it/100x100'
];

$('ul.slick-dots li').css('background-image', function(i) {
  return "url('" + artifacts[i % artifacts.length] + "')";
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="slick-dots">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>