CODEWITHSUNDEEP
javascriptjqueryarrays
Rob Myrick
Rob Myrick

Reputation: 859

jQuery: assign array values to another set of elements

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.

Upvotes: 2

Views: 5093

Answers (5)

Vijayendra Gade
Vijayendra Gade

Reputation: 79

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++;
    });
});

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122037

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>

Upvotes: 1

empiric
empiric

Reputation: 7878

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

Upvotes: 0

MasqueradeCircus
MasqueradeCircus

Reputation: 854

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/

Upvotes: 0

richdotjs
richdotjs

Reputation: 214

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
}

Upvotes: 0

Related Questions