JQuery - 将数组元素设置为每个 <li> 的属性值答案

【问题标题】：JQuery - Set array element as attribute value for every <li>JQuery - 将数组元素设置为每个 <li> 的属性值
【发布时间】：2021-04-12 20:37:43
【问题描述】：

我有一个数组arrayDescr，我需要使用forEach 为每个<li> 添加一个属性data-value。 data-value 的值应该是 arrayDescr 元素。例如，我有三个<li>，我有两个arrayDescr 元素。三个<li> 中的两个应该具有data-value arrayDescr[0]、[1] 等属性。

此代码有效，但我需要它在 forEach 中工作：

$("#name1").attr("data-value", arrayDescr[0])

#name 应该是 function(){return 'name' (i+1)}。在 forEach 中，此代码返回 undefined:

arrayDescr.forEach(function(item, index){
$("li").attr("data-value", item[index])}

【问题讨论】：

@RyanWilson 我需要一个数组元素，而不是整个数组都在数据值中
在您的.forEach 中，函数参数item 是数组的一项，这就是为什么您会被这个item[index] 定义为undefined
@RyanWilson arrayDescr.forEach(function(item, index){ $("#responseul").append("
名称：" + item + "

【解决方案1】：

这是一个普通的解决方案

var elem = document.querySelectorAll('li');

for (let i = 0; i < elem.length; i++) {
elem[i].setAttribute("data-value", "set value here, or determine how to make it dynamic"+i);
}

我还没有对它进行测试，但相信这在没有 JQuery 的情况下应该可以满足您的需求，并且它在许多浏览器（包括移动设备）中都是可以接受的。

for (let i = 0; i < elem.length; i++) {
elem[i].setAttribute("data-value", (YourDescArray[i] !== undefined)?YourDescArray[i]:"problem");
}

【讨论】：

打好仗：为 OP 提供真正的 JavaScript 答案； jQuery 需要从地球上清除。

【解决方案2】：

您可以像下面那样迭代 li 元素并分配 attr

$( "li" ).each(function( index ) {
     if(index<arrayDescr.length){
       $( this ).attr("data-value", arrayDescr[index]) ;
   }
});

【讨论】：

【解决方案3】：

我认为您应该迭代 li 元素并在 forEach 中设置它们的属性

$("li").each(function(i,item){
    if(arrayDescr.length > i)
        $(item).attr("data-value",arrayDescr[i]);
});

【讨论】：