Save html text content to array and use the array values in jQuery script

Question

I have a dynamic list of image urls in my html. It looks something like this:

<div class="header-images">
    <span class="slider-images">img.jpg</span>
    <span class="slider-images">img1.jpg</span>
    <span class="slider-images">img2.jpg</span>
</div>

I need to save the contents of each span to an array. Here is what I have so far:

var elems = document.getElementsByClassName("slider-images");
var arr = jQuery.makeArray(elems);
arr.reverse();

I need to take those values and use them in the code below to replace the current array for "images":

$("#image-head").bgswitcher({
    images: ["pic1.jpg", "pic2.jpg", "pic3.jpg"],
    interval: 5000,
    effect: fade
});

Schorsch · Accepted Answer · 2018-03-28 18:04:50Z

1

You are getting the span-Elements from jQuery, but you want the content of those elements. You can get them with .innerHTML. Look at this:

var elems = document.getElementsByClassName("slider-images");
var arr = jQuery.makeArray(elems);
arr.reverse();
arr = arr.map(data => data.innerHTML)
console.log(arr);

You can also do it as oneliner if you want:

let contents = $('.slider-images').toArray().reverse().map(elem => elem.innerHTML);
console.log(contents);

edited Mar 28, 2018 at 18:04

answered Mar 27, 2018 at 15:31

Schorsch

3191 silver badge15 bronze badges

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

Comments

treyBake · Accepted Answer · 2018-03-27 15:28:08Z

0

you can use jquery function $.each:

var array = [];

$('.slider-images').each(function(key, value)
{
    array.push = $(this).val()
})

console.log(array);

will show all the values for DOM elements that have a class of slider-images

ref: https://api.jquery.com/jQuery.each/

answered Mar 27, 2018 at 15:28

treyBake

6,5698 gold badges28 silver badges64 bronze badges

Collectives™ on Stack Overflow

Save html text content to array and use the array values in jQuery script

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related