背景URLを配列

Question

私はいくつかのdivを持つコンテナを持っています。各divには背景イメージがあります。各画像からURLにURLを取得する必要があります

<div id="images"> 
    <div style="background-image: url(79cbf113f.jpg)" class="thumb" title=""></div> 
    <div style="background-image: url(234234234.jpg)" class="thumb" title=""></div> 
</div> 
<button>Click</button> 

$(document).on("click", "button", function() { 
    var img = $('#images .thumb').attr("src"); 
}); 

どうすれば入手できますか？

Answer 1

mapと.cssを使用して、対応するCSSプロパティを取得します。正規表現を使用してプロパティを処理することもできます。

$(document).on("click", ".button", function() { 
 
    console.log(
 
     $('#images .thumb').map(function(){ 
 
     return $(this).css('background-image').replace(/url\("(.+)"\)/, '$1') 
 
     }) 
 
     .toArray() 
 
    ); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="images"> 
 
    <div style="background-image: url(79cbf113f.jpg)" class="thumb" title=""></div> 
 
    <div style="background-image: url(234234234.jpg)" class="thumb" title=""></div> 
 
</div> 
 

 
<button class="button">Collect Images </button>

Answer 2

使用mapとget：divを超える

$(document).on("click", "button", function() { 
 
    var images = $('#images .thumb').map(function() { 
 
     return this.style.backgroundImage; 
 
    }).get(); 
 
    console.log(images); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="images"> 
 
    <div style="background-image: url(79cbf113f.jpg)" class="thumb" title=""></div> 
 
    <div style="background-image: url(234234234.jpg)" class="thumb" title=""></div> 
 
</div> 
 
<button>Click</button>