JS jquery用数组中的值替换多个id属性

Question

一个页面有一个表，表中的行都具有id属性。

（从数字开始而不是字母在这里应该不会引起问题，因为CSS不必选择它）。

<tr id="0" class="whatever">
    <td>content</td>
    <td>content</td>
</tr>

<tr id="4" class="whatever">
    <td>content</td>
    <td>content</td>
</tr>

<tr id="2" class="whatever">
    <td>content</td>
    <td>content</td>
</tr>

<tr id="1" class="whatever">
    <td>content</td>
    <td>content</td>
</tr>

<tr id="3" class="whatever">
    <td>content</td>
    <td>content</td>
</tr>

我们有一个JS数组，它的值与tr元素（即“whatever”类的元素）的值完全一样多。

var arr=['0','1','2','3','4'];

如何使用jQuery或纯JS将所有tr id属性更改为arr数组的属性？期望的结果应该是:

<tr id="0" class="whatever">
    <td>content</td>
    <td>content</td>
</tr>

<tr id="1" class="whatever">
    <td>content</td>
    <td>content</td>
</tr>

<tr id="2" class="whatever">
    <td>content</td>
    <td>content</td>
</tr>

<tr id="3" class="whatever">
    <td>content</td>
    <td>content</td>
</tr>

<tr id="4" class="whatever">
    <td>content</td>
    <td>content</td>
</tr>

只是想说明一下:元素不必在页面上重新排列。顺序和所有内容都保持不变，但应该替换的只是id值。

我会做一个Foreach。但从那里我不知道如何继续下去，也找不到任何东西。

function ReplaceIDsFromArray(val, index) {
                    
  //do stuff
                    
}

arr.forEach(ReplaceIDsFromArray);

或者首先必须选择所有tr或“whatever”元素并将其放入一个数组中，然后对其执行forEach？

Answer 1

您只需同步迭代标识符数组和表rows列表即可:

null

function assignIdentifiers(rows, ids) {
    // Use `Math.min` to avoid out of range addressing
    let len = Math.min(ids.length, rows.length);
    for (let i = 0; i < len; i++) {
        rows[i].id = ids[i];
    }
}

// demo
let rows = document.querySelectorAll("table .whatever");
assignIdentifiers(rows, [1, 2, 3, 4, 5]);
// Show result:
console.log(document.querySelector("table").innerHTML);

<table>
<tr id="0" class="whatever">
    <td>content</td>
    <td>content</td>
</tr>

<tr id="4" class="whatever">
    <td>content</td>
    <td>content</td>
</tr>

<tr id="2" class="whatever">
    <td>content</td>
    <td>content</td>
</tr>

<tr id="1" class="whatever">
    <td>content</td>
    <td>content</td>
</tr>

<tr id="3" class="whatever">
    <td>content</td>
    <td>content</td>
</tr>
</table>

Answer 2

您可以简单地使用querySelectorAll方法和一个foreach将您的ID替换为您拥有的ID数字的数组。

现场演示:

null

var arr = ['0', '1', '2', '3', '4'];

var getTds = document.querySelectorAll('.whatever') //get all tr's
//Loop over and replace
getTds.forEach(function(td, i) {
  td.id = arr[i] //replace current id's
});

//New IDs
let newIds = document.querySelector("table").innerHTML
console.log(newIds) //shows HTML with new ID's

<table>
  <tr id="0" class="whatever">
    <td>content</td>
    <td>content</td>
  </tr>

  <tr id="4" class="whatever">
    <td>content</td>
    <td>content</td>
  </tr>

  <tr id="2" class="whatever">
    <td>content</td>
    <td>content</td>
  </tr>

  <tr id="1" class="whatever">
    <td>content</td>
    <td>content</td>
  </tr>

  <tr id="3" class="whatever">
    <td>content</td>
    <td>content</td>
  </tr>

</table>