Question

我的html中有一个动态的图片网址列表。它看起来像这样：

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

我需要将每个span的内容保存到数组中。以下是我到目前为止的情况：

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

我需要获取这些值并在下面的代码中使用它们来替换＆＃34;图像的当前数组＆＃34;：

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

Answer 1

您可以使用jquery函数$.each：

var array = [];

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

console.log(array);

将显示具有一类slider-images

的DOM元素的所有值

参考：https://api.jquery.com/jQuery.each/

Answer 2

您正在从jQuery获取span-Elements，但您需要这些元素的内容。你可以用.innerHTML来获取它们。看看这个：

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

如果您愿意，也可以将其作为oneliner：

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

将html文本内容保存到数组并使用jQuery脚本中的数组值

2 个答案: