jQuery loop through child elements to get attr value

Question

I am trying to loop through an elements children to get there attr value. My HTML looks like this:

<div class="deal">
   <img src="/images/deals/xbox-one500-gb-black.png" alt="Xbox One 500 GB Black box art/packaging" title="Xbox One 500 GB Black" height="60" width="40" class="console" />
   <img src="/images/deals/xbox-one-additional-controller.png" alt="Additional Controller box art/packaging" title="Additional Controller" height="60" width="40" />
   <img src="/images/deals/xbox-one-fifa-15.png" alt="FIFA 15 box art/packaging" title="FIFA 15" height="60" width="40" />              
</div>

I would like to get the title attr off all items and combine into 1 title.

here is my script:

$(".deal").each(function() {
  var test = $(this).attr('title');
}

console.log(test);

Am i approaching this in the right way?

No. `console.log($(".deal").get().map(function(d) {return d.title;}).join("\n"));` — Niet the Dark Absol, Nov 26 '14 at 17:33
@NiettheDarkAbsol `.deal` doesn't have any title attributes, you need to loop over its children. — Josh Harrison, Nov 26 '14 at 17:42

score 4 · Accepted Answer · answered Nov 26 '14 at 17:44

jQuery.map allows you to enumerate a set of elements and perform an action on each one. In your case you want to pull out the title and join those items together.

In this example I've simply joined them with a comma.

var all = $('.deal img').map(function(){
    return $(this).attr('title');
  }).get().join(',');

alert(all);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="deal">
   <img src="/images/deals/xbox-one500-gb-black.png" alt="Xbox One 500 GB Black box art/packaging" title="Xbox One 500 GB Black" height="60" width="40" class="console" />
   <img src="/images/deals/xbox-one-additional-controller.png" alt="Additional Controller box art/packaging" title="Additional Controller" height="60" width="40" />
   <img src="/images/deals/xbox-one-fifa-15.png" alt="FIFA 15 box art/packaging" title="FIFA 15" height="60" width="40" />              
</div>

score 2 · Answer 2 · answered Nov 26 '14 at 17:42

$.each loops over the result of the selector, which in your attempt was the container element, not its children. You want to adjust the selector to find the children img tags, build up an array of their titles and finally join the array together with commas or whatever separator you like:

var combined = [];

$(".deal img").each(function() {
  combined.push($(this).attr('title'));
});

var combinedStr = combined.join(", ");

$("#title").text("Above: " + combinedStr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="deal">
   <img src="http://lorempixel.com/60/40" alt="Xbox One 500 GB Black box art/packaging" title="Xbox One 500 GB Black" height="60" width="40" class="console" />
   <img src="http://lorempixel.com/60/40" alt="Additional Controller box art/packaging" title="Additional Controller" height="60" width="40" />
   <img src="http://lorempixel.com/60/40" alt="FIFA 15 box art/packaging" title="FIFA 15" height="60" width="40" />              
</div>
<div id="title"></div>

Great answer Josh; the .each seems more logical to me & it seems to use less memory per this answer comparing .each & map which both work well https://stackoverflow.com/questions/749084/jquery-map-vs-each — Catto, Jun 20 '17 at 19:51

score 0 · Answer 3 · answered Nov 26 '14 at 17:52

you are approaching the right way, but you are throwing your test var out with each pass. Also, you want to make sure your selector matches the img elements, and not the parent div.

// this is just debugging code specific to SO
var console = {
  "log": function(i) {
     var li = $('<li />');
      li.html(JSON.stringify(i));
      li.appendTo('#logger');
   }
};

//  this is the answer
var titles_as_array = [], titles_as_string='';

$('.deal img').each(function(el){
  titles_as_array.push( this.title );
});

titles_as_string = titles_as_array.join(' ');

console.log( titles_as_array );

console.log( titles_as_string );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="deal">
   <img src="/images/deals/xbox-one500-gb-black.png" alt="Xbox One 500 GB Black box art/packaging" title="Xbox One 500 GB Black" height="60" width="40" class="console" />
   <img src="/images/deals/xbox-one-additional-controller.png" alt="Additional Controller box art/packaging" title="Additional Controller" height="60" width="40" />
   <img src="/images/deals/xbox-one-fifa-15.png" alt="FIFA 15 box art/packaging" title="FIFA 15" height="60" width="40" />              
</div>

<ul id="logger"></ul>

jQuery loop through child elements to get attr value

3 Answers3