CODEWITHSUNDEEP
javascriptjquery
user715564
user715564

Reputation: 1690

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

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

Upvotes: 1

Views: 1479

Answers (2)

Schorsch
Schorsch

Reputation: 319

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

Upvotes: 1

treyBake
treyBake

Reputation: 6568

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/

Upvotes: 0

Related Questions