如何使用地图功能使用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(',');