CODEWITHSUNDEEP
jquery
crinkledMap
crinkledMap

Reputation: 1232

How to get a list of elements from JQuery each()

I'm using .each() to iterate through the contents of a div and return all the img tags (which are annoyingly wrapped in their own divs). In the console I see that all 4 img tags are being retrieved.

I don't know how to parse the data into the 4 separate tags.

I'm going to need to put < br /> between them, then turn that chunk of HTML into a variable, for use in an AJAX call.

$(function() {
        $("button").click(function(){
            $('.module-added').each(function(){            
                $foo = $(this).html();
                $('#links').html($foo);
            });

            $.ajax({
                method: 'POST',
                url: 'temp.php',
                datatype: 'json',
                data: {
                    page_title: 'A new mockup',
                    //modules: $BIG_CHUNK_O_HTML
                },
                success: function(data){
                    alert(data);
                }
            });
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>
    <div id="module">
        <div class="module-added">
            <img id="1" class="module-image" src="https://pbs.twimg.com/profile_images/931581316503691265/sFneyAO0_400x400.jpg">
        </div>
        <div class="module-added">
            <img id="2" src="https://d3ieicw58ybon5.cloudfront.net/ex/350.420/shop/product/7c7a9959a242428aa5ef41ce3c739b84.jpg">
        </div>
        <div class="module-added">
            <img id="3" src="https://vignette.wikia.nocookie.net/wallaceandgromit/images/f/f9/Wallace-Gromit-The-Wrong-Trousers-aardman-6899786-500-375.jpg/revision/latest?cb=20140526032207">
        </div>
        <div class="module-added">
            <img id="4" src="https://upload.wikimedia.org/wikipedia/en/thumb/e/ec/Wallace_and_gromit.jpg/250px-Wallace_and_gromit.jpg">
        </div>
    </div>
    <div id='links'></div>

Upvotes: 0

Views: 29

Answers (1)

Barmar
Barmar

Reputation: 780798

Use .map() and .join() to concatenate all the HTMLs with <br> between them, then put that in the DIV.

$(function() {
  $("button").click(function() {
    $foo = $('.module-added').map(function() {
      return $(this).html();
    }).get().join("<br>");
    $('#links').html($foo);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>
<div id="module">
  <div class="module-added">
    <img id="1" class="module-image" src="http://damcms.local/wp-content/uploads/2018/03/Mordecai-e1521130016403.png">
  </div>
  <div class="module-added">
    <img id="2" src="http://damcms.local/wp-content/uploads/2018/03/gromit-e1521130041157.jpg">
  </div>
  <div class="module-added">
    <img id="3" src="https://vignette.wikia.nocookie.net/wallaceandgromit/images/f/f9/Wallace-Gromit-The-Wrong-Trousers-aardman-6899786-500-375.jpg/revision/latest?cb=20140526032207">
  </div>
  <div class="module-added">
    <img id="4" src="https://upload.wikimedia.org/wikipedia/en/thumb/e/ec/Wallace_and_gromit.jpg/250px-Wallace_and_gromit.jpg">
  </div>
</div>
<div id='links'></div>

Upvotes: 1

Related Questions