リストをループして画像を追加する方法

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>