how to use map function in a list using Javascript or Jquery

Question

this is my 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>

has a select control that has a list associated to it. I want to map and get all image sources that has thumbnail selected class

I tried this but i get an empty array,

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

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

You could have included line breaks in your code for easier reading. — Difster
– Difster, Commented Jul 8, 2017 at 5:02

Death-is-the-real-truth · Accepted Answer · 2017-07-08 05:13:59Z

You need to do children() instead of closest() (Because images are children of thumbnail divs):-

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>

Note:- closest() use to check elements on same-level, but here images are children of the corresponding div, that's why you are getting empty array.

Ravindran · Accepted Answer · 2017-07-08 05:22:08Z

2

One of the simplest thing to do is put your criteria directly in jquery selector and select the image elements and process them. Here is the JS code.

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

answered Jul 8, 2017 at 5:22

Ravindran

821 silver badge3 bronze badges

Collectives™ on Stack Overflow

how to use map function in a list using Javascript or Jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related