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

Question

以下是我的后端生成的 HTML 代码，所以我无法控制它。如果后端有 N 个条目，它将创建 N 个类为 row 的元素，并在其中创建一个类名为 itemN 的元素。这个完整的标记被包装在具有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 标记中该数字的元素中。前任。类item1 的第一个元素应具有数组中的some_data3-first(即第0 个索引) 元素。

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

Answer 1

步骤/建议：

1. 您可以使用attribute-value 选择器选择其类以某个值开头的所有元素。 $('.grid [class^="item"]') 将选择 .grid 元素中类名以 item 开头的所有元素。
2. 使用each内的索引值，从数组中获取数据。
3. 使用append 或html/text 将数据添加到元素中。
4. 我还建议您使用数组字面量语法来定义数组，而不是 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>