javascript - forループを使用して背景画像でdivを作成するには?

Question

divの背景画像として設定する必要がある画像が約9つあります。そして、各 div には独自の位置があります。ループして、異なる背景画像で div タグを作成する必要があります。どうやってやるの？

Answer 1

styleプロパティを含む属性を作成するのは簡単background-imageです。

/* JavaScript + jQuery
 * var listOfImageSrcs = [
 *     '/rooted/path/to/file',
 *     'relative/path/to/file',
 *     'https://domain.tld/url/to/file'
 * ];
for(i in listOfImageSrcs) {
    var src = listOfImageSrcs[i];
    $('<div style="background-image: url(\'' + src + '\');"></div>').appendTo('body');
}

/* PHP
 * $listOfImageSrcs = array(
 *     '/rooted/path/to/file',
 *     'relative/path/to/file',
 *     'https://domain.tld/url/to/file'
 * );
 */
<?php foreach($listOfImageSrcs AS $src): ?>
    <div style="background-image: url('<?php echo($src); ?>');"></div>
<?php endforeach; ?>

また、が定義されdivていることを確認する必要があります(それらが表示されるようにするため)。widthheight

background-position画像のリストに情報がある場合は、それをstyleタグに追加することもできます。

Answer 2

あなたが提供したコンテキストでは答えるのが難しいですが、 $.each()を使用してコンテンツをループし、次に$().css("background-image", "url(image.jpg)");を使用できます。背景画像を設定します。