jQuery: assign array values to another set of elements

Question

I have this code:

jQuery(document).ready(function($) { 
    var i = 0; 
    var values = []; 
    var element = $('.source');
    element.each(function(i) { 
        values[i++] = $(this).text();
    });
});

I want to assign each array value above, as the individual data-text value on another set of list elements. Something like this:

<ul id="list">
  <li data-text="arrayvalue1"></li>
  <li data-text="arrayvalue2"></li>
  <li data-text="arrayvalue3"></li>
</ul>

I don't understand how I would do this using jQuery.

.source holds the elements we are pulling from. The html already exists for adding the data-text attributes, I just don't know how to pull from one array and inject the data-text attributes to another — Rob Myrick
– Rob Myrick, Commented Nov 28, 2016 at 19:45

Nenad Vracar · Accepted Answer · 2016-11-28 20:05:15Z

1

You can use attr() to assign data-text values with values from another array. With each() loop you are iterating over all li elements in ul and adding values from element array starting from 0, and you are also incrementing i by 1. So on second li, value of i will be 1 which is arrayvalue2 etc...

var element = ["arrayvalue1", "arrayvalue2", "arrayvalue3"]

var i = 0;
var values = $('ul li').each(function() {
  return $(this).attr('data-text', element[i++]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
  <li></li>
  <li></li>
  <li></li>
</ul>

edited Nov 28, 2016 at 20:05

answered Nov 28, 2016 at 19:44

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

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

1 Comment

Rob Myrick Over a year ago

This worked: the element[i++] is what confused me for some reason. Going to except this answer

richdotjs · Accepted Answer · 2016-11-28 19:45:26Z

0

Instead of using jQuery's each(), try using this higher order function. I don't have a complete picture of how your object looks but something like this should work:

element.forEach((el) => {
    el.dataset.text = referencedValue
}

answered Nov 28, 2016 at 19:45

richdotjs

2141 gold badge2 silver badges10 bronze badges

Comments

MasqueradeCircus · Accepted Answer · 2016-11-28 19:58:20Z

0

There's no need for the "i" var, just do a push to the array of values. Like this:

jQuery(document).ready(function($) { 
    var values = []; 
    var element = $('.source');
    element.each(function(i) {
        values.push($(this).data('text'));
    });
    console.log(values);
});

See this fiddle https://jsfiddle.net/masqueradecircus/errq8cp7/3/

answered Nov 28, 2016 at 19:58

MasqueradeCircus

8546 silver badges8 bronze badges

Comments

empiric · Accepted Answer · 2016-11-28 20:00:53Z

0

Provided you have your source elements you can iterate through them and apply the data attribute referring to the index of the element:

var element = $('.source');
element.each(function(i) {
  $('#list > li').eq(i).attr('data-text', $(this).text());
  //or
  $('#list > li').eq(i).data('text', $(this).text());
});

Note: the difference of the two lines is:

.attr() will apply the value in the dom as an attribute to the element (visible in the html markup). The value can be retrieved with .data() or .attr()

The second one applies the value as an association to the element, which will not be reflected in the dom. This can only be retrieved with .data()

Example

answered Nov 28, 2016 at 20:00

empiric

7,8767 gold badges40 silver badges51 bronze badges

Comments

Vijayendra Gade · Accepted Answer · 2017-01-10 17:26:38Z

0

Use $('.source li') and then you can use attr property in jquery to set the data-text attribute in another list. Please find the sample below: https://jsfiddle.net/vgade/km113ztL/

jQuery(document).ready(function($) { 
    var i = 0; 
    var values = []; 
    var element = $('.source li');
    element.each(function(i) { 
        $('#destination li')[i].attr("data-text",$(this).text());
        i++;
    });
});

edited Jan 10, 2017 at 17:26

answered Nov 28, 2016 at 20:06

Vijayendra Gade

797 bronze badges

2 Comments

empiric Over a year ago

What's the point of $($('#destination li')[i]) ? You are wrapping one jquery object on another

Vijayendra Gade Over a year ago

@empiric Yes you are right $('#destination li')[i] this will work too.

Collectives™ on Stack Overflow

jQuery: assign array values to another set of elements

5 Answers 5

1 Comment

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related