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 children thumbnail 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&h=90&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&h=90&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&h=90&mode=max"> </div> </li> </ul> </div>

注意： - closest()用于检查同级别的元素，但这里的图像是相应div的子级，这就是你得到空数组的原因。

Answer 2

最简单的事情之一是将您的标准直接放在jquery选择器中并选择图像元素并处理它们。这是JS代码。

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

如何使用Javascript或Jquery在列表中使用map函数

2 个答案: