JQuery each function to fill array with attributes from HTML images

Question

I'm trying to load an array filled with the src attribute from a series of img tags in my HTML document.

HTML:

<html>
<head>
<title>
    JQuery Slider
</title>
<link rel="stylesheet"  type="text/css" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>

<body>
    <div id = "wrapper">
    <h1 class="dark-header">2014 Salt Lake Comic Con FanX</h1>
        <div id="background-img">
            <img src="img/img01.jpg"/>
        </div>
        <div>
            <img src="img/img02.jpg"/>
        </div>
                <div>
            <img src="img/img03.jpg"/>
        </div>
                <div>
            <img src="img/img04.jpg"/>
        </div>
                <div>
            <img src="img/img05.jpg"/>
        </div>
                <div>
            <img src="img/img06.jpg"/>
        </div>
                <div>
            <img src="img/img07.jpg"/>
        </div>
                <div>
            <img src="img/img08.jpg"/>
        </div>
        <div>
            <img src="img/img09.jpg"/>
        </div>
                <div>
            <img src="img/img10.jpg"/>
        </div>
    </div>


</body>
</html>

JQuery:

$(document).ready(function() {



    var source = new Array();


    $('img').each(function(attr) {
        source.push($('img').attr('src'))
    });



    console.log(source)

});//end document.ready

The output to the console is an array of 10 elements, but only using the first img attribute. I'm not sure how to get the each function to go through all elements and push them to the array.

you need to use 'this' inside of the loop $(this).attr('src') — Juan
– Juan, Commented Feb 12, 2015 at 19:58

charlietfl · Accepted Answer · 2015-02-12 20:05:56Z

1

Your issue is that $('img').attr('src') will always return the value of the first element in the collection of elements.

As pointed out in comments , you need to look at specific instances within your loop

Another way you can do this is using map() which will create the array for you

var source = $('img').map(function(){
   return $(this).attr('src');
}).get();

DEMO

answered Feb 12, 2015 at 20:05

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gary Storey · Accepted Answer · 2015-02-12 20:21:29Z

1

You could try something like this:

var source = [];
$('img').each(function() {
  source.push( this.getAttribute('src') );
});

In your each code, you re-select the entire group with $('img') so it is only adding the first one of THAT Selection to your array.

OR

If you aren't using jQuery for anything else, you could do it in straight javascript like this:

document.addEventListener('DOMContentLoaded', getImgAttr);

var source = [];

function getImgAttr() {
  var imgs = document.querySelectorAll('img');
  [].forEach.call(imgs, function( img ) {
     source.push( img.src);
  });
}

edited Feb 12, 2015 at 20:21

answered Feb 12, 2015 at 20:00

Gary Storey

1,7822 gold badges15 silver badges19 bronze badges

1 Comment

talemyn Over a year ago

I was going to post the jQuery version of this, which would be the same, except: source.push($(this).attr('src'));

Juan · Accepted Answer · 2015-02-12 20:03:36Z

0

you need to use 'this' while inside the loop to reference the image, otherwise you are getting the reference to first 'img ' tag.

it should be like this:

$('img').each(function(attr) {
    source.push($(this).attr('src'))
});

answered Feb 12, 2015 at 20:03

Juan

5,0883 gold badges41 silver badges49 bronze badges

Comments

Ryan · Accepted Answer · 2015-02-12 20:13:38Z

0

Your callback function needs to accept a second param...

The first param is the current index of the array and the second param is the object at that index.

You may also utilize the keyword this as suggested above.

Based on my answer your code would look like this:

$('img').each(function(i, img) {
    source.push($(img).attr('src'));
    // alternatively -> source.push($(this).attr('src'));
});

A second option you may like and puts what you're trying to do onto a single line would be to use the jQuery map function...

var source = $.map($('img'), function(img) { return $(img).attr('src'); });

edited Feb 12, 2015 at 20:13

answered Feb 12, 2015 at 20:07

Ryan

6,86613 gold badges52 silver badges68 bronze badges

Collectives™ on Stack Overflow

JQuery each function to fill array with attributes from HTML images

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related