如何使用js动态更改元素id

Question

I am not using jQuery , I want to get all the elements that has an id attribute equal to app , and loop over those elements in order to assign a new unique id per elements.我没有使用jQuery ，我想获取所有id属性等于app的元素，并遍历这些元素以便为每个元素分配一个新的唯一 id。

For example, I have these <div /> :例如，我有这些<div /> ：

<div id="app"></div>
<div id="app"></div>
<div id="app"></div>

All have the same id .都有相同的id 。

I want to make them unique by add app-1 , app-2 app-3 dynamically.我想通过动态添加app-1 、 app-2 app-3来使它们独一无二。

How can I do this using Vanilla JS?如何使用 Vanilla JS 做到这一点？

For those who may need to know why?对于那些可能需要知道为什么的人？ well it was for instantiating vuejs instances in the same page with same ids.好吧，它是用于在具有相同 id 的同一页面中实例化 vuejs 实例。 I was trying to it in wp elementor widget.我试图在 wp elementor 小部件中使用它。 I was able to instantiate the widget with one vue instance but it failed when I dropped the same widget.我能够用一个 vue 实例实例化小部件，但是当我删除同一个小部件时它失败了。 so I needed to change id of the instance dynamically.所以我需要动态更改实例的 id。 Here are the code which will definitely help you all这是绝对可以帮助您所有人的代码

<nice>
<div id="app" class="app">
{{ message }}
<h1  v-for="(l,i) in lists" :key="i">{{l.name}} {{i+1}} </h1>
</div>
</nice>

var list = document.getElementsByTagName("nice");

    for (var i = 0; i < list.length; i++) {
        list[i].setAttribute("id", "app-" + i);
        var app = new Vue({
        el: "#app-" + i,
        data: {
            message: 'Hello Vue!', 
            lists: [{name: 'wow this is cool'},{name: 'wow this is cool'},{name: 'wow this is cool'},{name: 'wow this is cool'}],
        }
        })

    }
</script>

Answer 1

Specifying where the divs are coming from is important here because you should be using class instead of id's since id's are to be unique.在这里指定 div 的来源很重要，因为您应该使用 class 而不是 id，因为 id 是唯一的。

To answer your question specifically and if you can't change the id's, then the below will use the the tag name to complete the task you need.要具体回答您的问题，如果您无法更改 id，那么下面将使用标签名称来完成您需要的任务。

updated: removed button to clearly demonstrate update更新：删除按钮以清楚地显示更新

 var list = document.getElementsByTagName("DIV"); for (var i = 0; i < list.length; i++) { list[i].setAttribute("id", "app-" + i); }

 <!DOCTYPE html> <html> <body> <div id="app">A</div> <div id="app">B</div> <div id="app">C</div> </body> </html>

Answer 2

Attribute id must have unique values in an HTML page, which means you can't have more than one in the same page.属性id在 HTML 页面中必须具有唯一值，这意味着同一页面中不能有多个。

You want to use class which can have many of the same names, check this example:您想使用可以有许多相同名称的class ，请查看以下示例：

 [...document.getElementsByClassName('app')].forEach(($app, i) => $app.classList.add(`app-${i+1}`));

 .app { width: 100px; height: 100px; display: inline-block; }.app-1 { border: 1px solid red; }.app-2 { border: 1px solid green; }.app-3 { border: 1px solid blue; }

 <div class="app"></div> <div class="app"></div> <div class="app"></div>

If you have a bad HTML that use unique id multiple time, that way you can fix them:如果您有一个坏的 HTML 多次使用唯一id ，那么您可以修复它们：

 [...document.querySelectorAll('div[id="app"]')].forEach(($app, i) => $app.setAttribute('id', `app-${i+1}`));

 #app { background-color: black; width: 100px; height: 100px; display: inline-block; } #app-1 { border: 1px solid red; width: 100px; height: 100px; display: inline-block; } #app-2 { border: 1px solid green; width: 100px; height: 100px; display: inline-block; } #app-3 { border: 1px solid blue; width: 100px; height: 100px; display: inline-block; }

 <div id="app"></div> <div id="app"></div> <div id="app"></div>

如何使用js动态更改元素id

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-04-19 16:32:54

解决方案2
0 2020-04-19 16:22:57

如何使用js动态更改元素id

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-04-19 16:32:54

解决方案2 0 2020-04-19 16:22:57

解决方案1
1 已采纳 2020-04-19 16:32:54

解决方案2
0 2020-04-19 16:22:57