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 - 第一个（，即第0个索引）元素。

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

Answer 1

<强>步骤/建议：

您可以使用attribute-value选择器选择其类以某个值开头的所有元素。 $('.grid [class^="item"]')会选择.grid个元素中的所有元素，这些元素的类名称以item开头。
使用each内的索引值，从阵列中获取数据。
使用append或html / text将数据添加到元素中。
我还建议您使用数组文字语法来定义数组而不是Array构造函数

<强>演示

＆＃13;

// 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]);
});

＆＃13;

<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>

＆＃13;

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

1 个答案: