jQuery的：分配數組值到另一組元素

Question

的我有這樣的代碼：

jQuery(document).ready(function($) { 
    var i = 0; 
    var values = []; 
    var element = $('.source'); 
    element.each(function(i) { 
     values[i++] = $(this).text(); 
    }); 
}); 

欲每個陣列值分配的上方，作爲另一組列表元素的各個值data-text。這樣的事情：

<ul id="list"> 
    <li data-text="arrayvalue1"></li> 
    <li data-text="arrayvalue2"></li> 
    <li data-text="arrayvalue3"></li> 
</ul> 

我不明白我會如何使用jQuery來做到這一點。

Answer 1

您可以使用attr()將data-text值與另一個數組中的值分配。與each()環你迭代所有li元件ul和從element陣列從0開始添加值，並且您也遞增1。i所以上第二li，的i值將是1，其是arrayvalue2等...

var element = ["arrayvalue1", "arrayvalue2", "arrayvalue3"] 
 

 
var i = 0; 
 
var values = $('ul li').each(function() { 
 
    return $(this).attr('data-text', element[i++]); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="list"> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

Answer 2

而不是使用jQuery的每個（），請嘗試使用這種高階的功能。 我沒有你的物體的外觀，但這樣的事情應該工作的全貌：

element.forEach((el) => { 
    el.dataset.text = referencedValue 
} 

Answer 3

沒有必要對「我」的變種，只是做一個推值的數組。就像這樣：

jQuery(document).ready(function($) { 
    var values = []; 
    var element = $('.source'); 
    element.each(function(i) { 
     values.push($(this).data('text')); 
    }); 
    console.log(values); 
}); 

看到這個小提琴https://jsfiddle.net/masqueradecircus/errq8cp7/3/

Answer 4

只要你有你的源元素，你可以遍歷它們並應用data屬性指的是index of the element：

var element = $('.source'); 
element.each(function(i) { 
    $('#list > li').eq(i).attr('data-text', $(this).text()); 
    //or 
    $('#list > li').eq(i).data('text', $(this).text()); 
}); 

注：區別的兩條線是：

.attr()將應用val ue在dom中作爲元素的屬性（在html標記中可見）。該值可通過.data()或.attr()或.attr()

第二個將值作爲關聯應用於該元素，這不會反映在dom中。這隻能與.data()

---

Example

Answer 5

使用$（「源禮」），然後你可以使用ATTR財產的jQuery設置在另一個列表中的數據，文本屬性檢索。 請看以下例子： https://jsfiddle.net/vgade/km113ztL/

jQuery(document).ready(function($) { 
    var i = 0; 
    var values = []; 
    var element = $('.source li'); 
    element.each(function(i) { 
     $('#destination li')[i].attr("data-text",$(this).text()); 
     i++; 
    }); 
});