jQuery 将数组中的数据附加到相应的索引元素

Question

以下是我的后端生成的 HTML 代码，所以我无法控制它。如果在后端有 N 个条目，它将创建 N 个 class row 的元素，并在其中创建一个 classname itemN 的元素。这个完整的标记包装在具有 class grid 的容器中。正如您在下面的标记中看到的，所有元素都是空的，这些元素中没有文本。

这是 6 个项目的标记。

<div class="grid">
    <div class="row">
        <div class="item1"></div>
    </div>
    <div class="row">
        <div class="item2"></div>
    </div>
    <div class="row">
        <div class="item3"></div>
    </div>
    <div class="row">
        <div class="item4"></div>
    </div>
    <div class="row">
        <div class="item5"></div>
    </div>
    <div class="row">
        <div class="item6"></div>
    </div>
</div>

对于来自后端的 N 个元素标记，我也得到了相同数量的元素数组，如下所示。

var grid = new Array('some_data3', 'some_data1', 'some_data2', 'some_data4', 'some_data6', 'some_data5');

谈到这个问题，我想将数组中的数据附加到 HTML 标记中该数字的元素。前任。具有 class item1 的第一个元素应该具有数组中的 some_data3-第一个（即第 0 个索引）元素。

如何使用 jQuery 将该数组附加到 .grid？

Answer 1

Steps/Suggestions:

您可以使用 attribute-value select 或 select 所有 class 以某个值开头的元素。 $('.grid [class^="item"]') 将 select .grid 名称以 item.
使用each中的索引值，从数组中获取数据。
使用append或html/text将数据添加到元素。
我也会推荐你使用数组文字语法来定义数组而不是Array构造函数

演示

// Array of data
var grid = ['some_data3', 'some_data1', 'some_data2', 'some_data4', 'some_data6', 'some_data5'];

// For all the elements inside the .grid element whose classname starts with `item`
$('.grid [class^="item"]').each(function(i) {
  // i is the index inside the loop
  // Append the data from array at index i to the current element
  $(this).append(grid[i]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="grid">
  <div class="row">
    <div class="item1"></div>
  </div>
  <div class="row">
    <div class="item2"></div>
  </div>
  <div class="row">
    <div class="item3"></div>
  </div>
  <div class="row">
    <div class="item4"></div>
  </div>
  <div class="row">
    <div class="item5"></div>
  </div>
  <div class="row">
    <div class="item6"></div>
  </div>
</div>

jQuery 将数组中的数据附加到相应的索引元素

jQuery append the data from array to the corresponding indexed element

arrays

jquery

append

appendto