Iterate over array and use elements as data attributes

Question

How do I loop through an array and add the elements of the array to the data attribute of the spans inside a div?

html

<div id="wordBank">
    <span>Play</span>
    <span>Game</span>
</div>

jQuery

var words = ["play", "game"];

$.each(words, function(index, value){
    $("#wordBank span").each(function(){
        $(this).attr('data-word', value);
    });
});

Current output

<div id="wordBank">
    <span data-word="game">Play</span>
    <span data-word="game">Game</span>
</div>

Desired output

<div id="wordBank">
    <span data-word="play">Play</span>
    <span data-word="game">Game</span>
</div>

You don't need nested loops. Try to iterate the spans and look up the word by index like words[spanIndex]. — elclanrs
– elclanrs, Commented Dec 5, 2020 at 3:31

Maheer Ali · Accepted Answer · 2020-12-05 03:31:53Z

2

You just need to loop on single array and access the value on corresponding index. You don't need a nested loop here.

var words = ["play", "game"];


$("#wordBank span").each(function(index){
    $(this).attr('data-word', words[index]);
});
  
console.log(document.querySelector('#wordBank').outerHTML)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wordBank">
    <span>Play</span>
    <span>Game</span>
</div>

answered Dec 5, 2020 at 3:31

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

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

Collectives™ on Stack Overflow

Iterate over array and use elements as data attributes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related