Reputation: 1690
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
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
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