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的值将为1，即i等...

＆＃13;

arrayvalue2

＆＃13;

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

＆＃13;

Answer 2

不要使用jQuery＆each（），而是尝试使用这个更高阶的函数。我不完全了解你的对象看起来如何，但这样的事情应该有效：

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

Answer 3

不需要“i”var，只需按下数组即可。像这样：

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()会将dom中的值作为属性应用于元素（在html标记中可见）。可以使用.data()或.attr()

检索该值

第二个将值作为元素的关联应用，不会反映在dom中。只能使用.data()

检索此内容

<强> Example

Answer 5

使用$（＆＃39; .source li＆＃39;）然后您可以在jquery中使用attr属性在另一个列表中设置data-text属性。请在下面找到示例： https://jsfiddle.net/vgade/km113ztL/

$.each($('p'), function(i,e) {
  $(e).html($(e).html().replace(/\bcandy\b/,'<a href="http://www.rantlifestyle.com/wp-content/uploads/2014/06/First.jpg">candy</a>'));
})

    $.each($('p'), function(i,e) {
      $(e).html($(e).html().replace(/\bcan\b/,'<a href="https://thumbs.dreamstime.com/x/empty-tin-can-7151872.jpg">can</a>'));
})

jQuery：将数组值分配给另一组元素

5 个答案: