如何使用地圖功能使用Javascript或Jquery的

Question

名單，這是我的HTML，

<div id="container" class="myGal" tabindex="5001" style="overflow: hidden; outline: none;"> 
 
    <select id="Select1" style="display:none" multiple="multiple" data-limit="7" wtx-context="5C3D486B-FBBF-4191-BDA3-C2F28323036B"> 
 
     <option></option> 
 
     <option data-img-src="" value="728" data-img-label="10"></option> 
 
     <option data-img-src="" data-img-label="11"></option> 
 
     <option data-img-src="" value="730" data-img-label="12"></option> 
 
    </select> 
 
    <ul class="thumbnails image_picker_selector"> 
 
     <li> 
 
     <div class="thumbnail selected"><img class="image_picker_image loaded" src="http://localhost:1344//ARTSQLDATA/PTDIR/170629062/Pictures/Personal_Picture/170629062_4353_4a97162c-7350-43eb-82df-6e92f49b30bb.jpg?w=90&amp;h=90&amp;mode=max"></div> 
 
     </li> 
 
     <li> 
 
     <div class="thumbnail"><img class="image_picker_image loaded" src="http://localhost:1344//ARTSQLDATA/PTDIR/170629062/Pictures/Personal_Picture/170629062_4353_bb197250-91ab-449e-9cd0-3f69ef3a7353.jpg?w=90&amp;h=90&amp;mode=max"></div> 
 
     </li> 
 
     <li> 
 
     <div class="thumbnail selected"><img class="image_picker_image" src="http://localhost:1344//ARTSQLDATA/PTDIR/170629062/Pictures/Personal_Picture/170629062_4353_8eb91587-f229-46f4-af1e-7327cb81a25e.jpg?w=90&amp;h=90&amp;mode=max"></div> 
 
     </li> 
 
    </ul> 
 
</div>

有具有關聯列表的select控制。我要地圖並獲得具有thumbnail selected類

我想這一切的圖像源，但我得到一個空數組，

var list = $('.thumbnail').map(function() { return $(this).closest("img").attr("src"); }).get(); 

console.log(list.join(',')) 

Answer 1

你需要做的children()代替closest()（因爲images是childrenthumbnail的div）： -

var list = $('.thumbnail').map(function() { return $(this).children("img").attr("src"); }).get(); 
 

 
console.log(list); 
 

 
//console.log(list.join(','));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container" class="myGal" tabindex="5001" style="overflow: hidden; outline: none;"> 
 
    <select id="Select1" style="display:none" multiple="multiple" data-limit="7" wtx-context="5C3D486B-FBBF-4191-BDA3-C2F28323036B"> 
 
    <option></option> 
 
    <option data-img-src="" value="728" data-img-label="10"></option> 
 
    <option data-img-src="" data-img-label="11"></option><option data-img-src="" value="730" data-img-label="12"></option> 
 
    </select> 
 
    <ul class="thumbnails image_picker_selector"> 
 
    <li> 
 
     <div class="thumbnail selected"> 
 
     <img class="image_picker_image loaded" src="http://localhost:1344//ARTSQLDATA/PTDIR/170629062/Pictures/Personal_Picture/170629062_4353_4a97162c-7350-43eb-82df-6e92f49b30bb.jpg?w=90&amp;h=90&amp;mode=max"> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="thumbnail"> 
 
     <img class="image_picker_image loaded" src="http://localhost:1344//ARTSQLDATA/PTDIR/170629062/Pictures/Personal_Picture/170629062_4353_bb197250-91ab-449e-9cd0-3f69ef3a7353.jpg?w=90&amp;h=90&amp;mode=max"> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="thumbnail selected"> 
 
     <img class="image_picker_image" src="http://localhost:1344//ARTSQLDATA/PTDIR/170629062/Pictures/Personal_Picture/170629062_4353_8eb91587-f229-46f4-af1e-7327cb81a25e.jpg?w=90&amp;h=90&amp;mode=max"> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

注意： - closest()用於檢查相同級別的元素，但這裏的圖像是相應div的子元素，這就是爲什麼您要獲得空數組。

Answer 2

要做的最簡單的事情之一是直接在jQuery選擇器中選擇圖像元素並處理它們。這是JS代碼。

$('.thumbnail.selected > img').map(function() {return this.src;}).get().join(',');