javascript - 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 或“任何”元素并将其放入数组中，然后对其执行 forEach ？

标签： javascripthtmljqueryarrays

Answer 1

您可以简单地使用querySelectorAll方法和 a将您的forEach替换为您id拥有的array数字id's。

现场演示：

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>