在 JavaScript 或 jQuery 中动态设置 div id

Dynamically setting div id in JavaScript or jQuery

提问by Chakradhar

How to set the div id dynamically? Here is my code:

如何动态设置div id？这是我的代码：

<div id="q1"></div>
<div id="q2"></div>
<div id="q3"></div>
<div id="q4"></div>
<div id="q5"></div>

Now I want to set the q4 div id to q1 something like that in JavaScript. How can I do that in JavaScript or jQuery?

现在我想在 JavaScript 中将 q4 div id 设置为 q1 。我如何在 JavaScript 或 jQuery 中做到这一点？

I have tried this.

我试过这个。

 document.getElementById("q4").id = "q1"; 
 document.getElementById("q2").id = "q5";

but it is saying that the object is null or undefined.

但它说该对象为空或未定义。

Thanks. chakri.

谢谢。查克里。

回答by Samich

Using jquery:

使用jQuery：

set dynamically one by one:

一一动态设置：

var idCount = 1;
$('div').each(function() {
   $(this).attr('id', 'q' + idCount);
   idCount++;
});

to rearrange what you want:

重新排列你想要的：

$('div#q4').attr('id', 'q1');
$('div#q2').attr('id', 'q5');

回答by Ernestas Stankevi?ius

$('#q1').attr('id', 'q4')it soulde work I think...

$('#q1').attr('id', 'q4')我认为它的灵魂工作...

EDIT:

编辑：

If it still doesnt work try put this before </body>:

如果它仍然不起作用，请尝试将其放在之前</body>：

<script>
    $(document).ready(function(){
        $('#q1').attr('id', 'q4')
    });
</sript>

回答by Ehtesham

First of all, you are giving the id to an element an id which is already given to some element before, that's not a right thing to do you can't have more than one id in your DOM. Anyway the code would be something like

首先，您将 id 赋予一个元素，而该 id 之前已经赋予了某个元素，这不是正确的做法，您的 DOM 中不能有多个 id。无论如何，代码将类似于

    var element = document.getElementById('q4');
    element.setAttribute('id', 'q7');
    if(document.getElementById('q7').innerHTML = "All is well")
          alert(document.getElementById('q7').innerHTML);    //to check if the new id has been set correctly

Fiddle http://jsfiddle.net/kmSHB/

小提琴http://jsfiddle.net/kmSHB/

回答by jmar777

Your code is fine, which means that if it's failing, you're probably running the JavaScript before those elements have been defined in the DOM. Try moving the script block to belowthose elements (e.g., the bottom of the page), or place your code in a DOM load/ready handler.

您的代码很好，这意味着如果它失败了，您可能在 DOM 中定义这些元素之前运行了 JavaScript。尝试将脚本块移动到这些元素下方（例如，页面底部），或者将您的代码放在 DOM 加载/就绪处理程序中。

---

---

编辑：不知道为什么这被否决了，但无论如何。如果您想在等待 DOM 就绪事件时在 jQuery 中执行此操作，则应该可以：

$(function() {
    $('#q4').attr('id', 'q1');
    $('#q2').attr('id', 'q5');
});

Please note that the important part here isn't the fact that setting the id is done in jQuery or vanilla JavaScript - the important part is that we're waiting until the DOM is ready for manipulation.

请注意，这里的重要部分不是在 jQuery 或 vanilla JavaScript 中设置 id 的事实 - 重要的部分是我们正在等待 DOM 准备好进行操作。

回答by Jan Pfeifer

Your code works fine. Except that after that you will have 2 divs with the same id. So you will run to problems if you try to get q1again.

你的代码工作正常。除了在那之后，您将拥有 2 个具有相同 ID 的 div。因此，如果您再次尝试获得q1，则会遇到问题。

回答by sharmila

Try this..

尝试这个..

var divid = document.getElementById('q1');

var divid = document.getElementById('q1');

divid.id = 'q5';

divid.id = 'q5';

回答by DA.

in jQuery you could do this:

在 jQuery 中，你可以这样做：

$('#q4').attr('id', 'q1');

However, note that that will now leave you with invalid markup, as you can't use the same ID more than once in a document.

但是，请注意，这现在会给您留下无效标记，因为您不能在一个文档中多次使用相同的 ID。

回答by robertfoenix

In JavaScript

在 JavaScript 中

var yourElement = document.getElementById('originalID');
yourElement.setAttribute('id', 'yourNewID');

In jQuery

在 jQuery 中

$('#originalID').attr('id', 'yourNewID');

JSFiddle example

JSFiddle 示例