Loop through array and return the data attribute value

Question

I am new to programming and stack overflow, so please forgive me if I am not formatting my question properly :)

I'm trying to loop through an array containing three spans, and log the 'data-strength' attribute value. I am able to get the individual spans with $el[i], and am also able to get the attribute value with $el.attr('data-strength'). When I combine the two however $el[i].attr('data-strength'), an error is returned. I assume this is a syntax error, but I'd love some guidance.

I've also included the pen link below. Thanks!!!

<div id="container">
  <button id="trigger">Click Me</button>

  <div id="strength">
    <span data-strength="60"></span>
    <span data-strength="50"></span>
    <span data-strength="40"></span>
  </div>
</div>

var $trigger = $("#trigger"),
    $el = $("#strength span"),
    $counter = $el.length;

$trigger.click(function(){
    for(var i = 0; i < $counter; i++){   
        var $result = $el[i].attr('data-strength');
    console.log($result);
    }  
});

https://codepen.io/joeylane/pen/dmGpdq

Eddie · Accepted Answer · 2018-03-16 03:05:36Z

1

$el[i] is not a jQuery object. You have to $($el[i]) to use attr

var $trigger = $("#trigger"),
  $el = $("#strength span"),
  $counter = $el.length;

$trigger.click(function() {
  for (var i = 0; i < $counter; i++) {
    var $result = $($el[i]).attr('data-strength');
    console.log($result);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <button id="trigger">Click Me</button>

  <div id="strength">
    <span data-strength="60"></span>
    <span data-strength="50"></span>
    <span data-strength="40"></span>
  </div>
</div>

You can also use each to loop thru your array and use this as selector.

$trigger.click(function(){
    $el.each(function(){
        var $result = $(this).attr('data-strength');
        console.log($result);
    });
});

edited Mar 16, 2018 at 3:05

answered Mar 16, 2018 at 3:03

Eddie

26.8k6 gold badges39 silver badges59 bronze badges

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

3 Comments

John Dvorak Over a year ago

Then there's $().data, which automatically parses JSON and lets you store arbitrary data with the element (though it won't back-edit the attribute)

Patrick Evans Over a year ago

You can also use .eq() to get a jquery object of the element at that index

Eddie Over a year ago

Thanks guys. All your suggestions are great and correct :)

gavgrif · Accepted Answer · 2018-03-16 03:05:24Z

0

Just iterate ver the spans within the div and use $(this).() to get the data attribue of each.

$("#trigger").click(function(){
  $("#strength span").each(function(){
    var strength = $(this).attr('data-strength');
    console.log(strength);
  })  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <button id="trigger">Click Me</button>

  <div id="strength">
    <span data-strength="60"></span>
    <span data-strength="50"></span>
    <span data-strength="40"></span>
  </div>
</div>

answered Mar 16, 2018 at 3:05

gavgrif

15.5k2 gold badges30 silver badges31 bronze badges

Collectives™ on Stack Overflow

Loop through array and return the data attribute value

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related