數組中的背景URL

-1

我有一個容器有幾個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"); 
});

我如何得到這些？

來源

2017-07-31 santa

@trincot更新 – santa

map過的div並獲得相應的使用.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>

來源

2017-07-31 20:35:29

酷。我只需要圖像名稱，沒有路徑。只要替換？謝謝 – santa

然後你可以使用一些原生DOM代碼'this.style.backgroundImage.replace（/ url \（「（。+）」\）/，'$ 1'）' –

使用map和get：

$(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>

來源

2017-07-31 20:33:20 trincot

數組中的背景URL

回答

相關問題