map array to elements text using jQuery.each inside a for loop?

Question

for the given html:

<div id="parent">
    <div class="child">x</div>
    <div class="child">y</div>
    <div class="child">z</div>
</div>

How can I map the text of its children from an array?

This is my try:

var myArray = ['a', 'b', 'c'];

for (var i = -1; i < myArray.length; i++) {
    $('#parent .child').each(function () {
        $(this).text(myArray[i]);
    });
}

I get: c,c,c

How can I get a,b,c ?

floriangosse · Accepted Answer · 2017-02-22 23:20:15Z

5

You don't need the outer for loop:

var myArray = ['a', 'b', 'c'];

$('#parent .child').each(function (index) {
    $(this).text(myArray[index]);
});

answered Feb 22, 2017 at 23:20

floriangosse

1,1331 gold badge10 silver badges22 bronze badges

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

1 Comment

user7607751 Over a year ago

Thank you! I appreciate it!

kind user · Accepted Answer · 2017-02-22 23:22:24Z

2

There's no need to use for loop here.

var myArray = ['a', 'b', 'c'];

$('#parent').find('div').each(function(){
  $(this).html(myArray[$(this).index()]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
    <div class="child">x</div>
    <div class="child">y</div>
    <div class="child">z</div>
</div>

answered Feb 22, 2017 at 23:22

kind user

42k8 gold badges69 silver badges78 bronze badges

6 Comments

ibrahim mahrir Over a year ago

each already provides an optional parameter for the callback which is the index!

kind user Over a year ago

@ibrahimmahrir I have seen it inside florian's answer. It's just an another way to solve it. And by the way - in would be unfair if I would copy&paste florian's solution.

ibrahim mahrir Over a year ago

If a better answer is already provodided then you could just step down and not answering!

kind user Over a year ago

@ibrahimmahrir I just wonder - have you to use ! in your every sentence? Anyways, it's just less 'elegant' solution, not worse.

ibrahim mahrir Over a year ago

I didn't say worse! It's still a correct answer and a better way but not the best!!!!!!!!!!!!

|

guest271314 · Accepted Answer · 2017-02-22 23:37:44Z

2

Use .text(function)

var myArray = ['a', 'b', 'c'];
$("#parent > .child").text(function(index) {
  return myArray[index]
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="parent">
  <div class="child">x</div>
  <div class="child">y</div>
  <div class="child">z</div>
</div>

edited Feb 22, 2017 at 23:37

answered Feb 22, 2017 at 23:30

guest271314

1

2 Comments

user7607751 Over a year ago

Thank you! I appreciate it!

guest271314 Over a year ago

@null Note, .each() is not necessary to return expected result. First parameter of .text(function(index, existingText){}) callback is index of current element in jQuery() collection. .text() iterates each element in the collection returned by $("#parent > .child") call.

Collectives™ on Stack Overflow

map array to elements text using jQuery.each inside a for loop?

3 Answers 3

1 Comment

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related