javascript - jQuery loop through child elements to get attr value - Stack Overflow

admin管理员组

文章数量:1415684

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 bine 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?

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 bine 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?

• javascript
• loops

Share Improve this question Follow asked Nov 26, 2014 at 17:32 danyodanyo 5,8462020 gold badges6666 silver badges120120 bronze badges 3

• No. console.log($(".deal").get().map(function(d) {return d.title;}).join("\n")); – Niet the Dark Absol Commented Nov 26, 2014 at 17:33
• @NiettheDarkAbsol .deal doesn't have any title attributes, you need to loop over its children. – Josh Harrison Commented Nov 26, 2014 at 17:42
• 1 Yeah, I meant ".deal>[title]" or something XD – Niet the Dark Absol Commented Nov 26, 2014 at 17:44

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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 ma.

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

alert(all);

<script src="https://ajax.googleapis./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>

$.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 mas or whatever separator you like:

var bined = [];

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

var binedStr = bined.join(", ");

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

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="deal">
   <img src="http://lorempixel./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./60/40" alt="Additional Controller box art/packaging" title="Additional Controller" height="60" width="40" />
   <img src="http://lorempixel./60/40" alt="FIFA 15 box art/packaging" title="FIFA 15" height="60" width="40" />              
</div>
<div id="title"></div>

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./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>

本文标签： javascriptjQuery loop through child elements to get attr valueStack Overflow