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

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 class

的图像源

我试过了，但我得到一个空数组，

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&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 的子元素，这就是为什么你得到空数组的原因。