使用JavaScript为元素分配ID

我想为HTML文件中的段落分配唯一ID。
如何在JavaScript中使用循环实现这一点？ （假设我知道其中的段落数）

函数计数（）{
var num=$（“p”）.size（）；
对于（变量i=0；i
这是第2段

这是第3段

这是第4段

JavaScript

var elP = document.querySelectorAll("p");  
[].slice.call(elP).forEach(function(el, v) {
    el.id = el.id || "p"+v;    // or use `el.id = "p"+v;` to overwrite
});

jQuery

$("p").prop("id", function(idx, currID) {
    return currID || "p"+idx; // or use `return "p"+idx;` to overwrite
});

上面使用了

.prop（）

方法回调的

idx，currID

（索引，值）参数
它将为您的所有

分配一个ID

pN

（N从

0

开始），而不覆盖现有ID

之前：

<p></p>
<p></p>
<p id="foo"></p>
<p></p>

之后：

<p id="p0"></p>
<p id="p1"></p>
<p id="foo"></p>
<p id="p3"></p>

注意：

是非法的结束标记。（）

尝试同时使用以下方法：

function count() {
        $('p').each(function(index){
           if($(this).prop('id') === ""){ // make sure that we're not overwriting any already assigned id
               $(this).prop('id', 'para-'+index); // index starts at 0
           }
        });
}

有效id不能只是数字，所以我在它们前面加了短语“para-”

试试这个：

function count() {
    $('p').each(function(index) {
        this.id = 'p' + index;
    });
}

这将基本上在所有“p”元素中循环。在给定给每个函数的函数上下文中，这表示HtmleElement。您可以直接分配id。无需将HtmleElement包装在jQuery对象中，因为可以在原始元素上访问id

（您必须检查结果中的Html才能查看ID）

此处：

    count = function() {
            $('div > p').each(function(index, el){
            el.id = 'para-'+index;
            });
    };

>用于直接子级。你不必担心p里面的p，因为它是非法的

---

我不知道您是否需要innerHTML或id属性，但我将以两种方式来实现

HTML

函数计数（）{
VaR PAR=文档.GETelEngsByTAGNODY（“p”）；
对于（var i=0，j=par.length；如果
元素有单独的父元素，我不会创建重复的ID吗？另外，别忘了-id不能以数字开头。这对于他的代码是特定的……他会明白的。人们总是可以使用
'div>p'
。同意p中的名称无论如何都是无效的；）不要让函数成为有价值的全局函数，除非你想在将来遇到真正的问题。@miro，如果它是
，我的意思就更多了-但是不要担心，@RokoC.Buljan在这篇评论中解释道：但是如果
元素有单独的父元素，它仍然会创建重复的ID，不是吗？我尝试在单独的pare下添加一个它没有分配重复的ID，除非我误解了你的意思saying@thePav否，因为index
i
参数表示返回的jQuery每个集合中的索引。尽管
.each（）
迭代器根本不需要，因为
$（'p'）
已经是元素的集合，因此您可以立即查找
.prop（）
@RokoC.Buljan，啊哈！感谢您澄清+1您应该知道
类型的$（this）。prop（'id'）
将返回
“字符串”
是否为元素添加ID。不要在不需要的地方使用jQuery。jQuery是JS，因此可以使用
this.ID
@RokoC.Buljan。我们只想在没有ID的情况下添加ID。如果没有ID，则返回“undefined”。完全同意只在需要时使用jquery。问题似乎是问如何使用jquery执行此操作：）@haxxxton能否请您发布一个示例，其中没有ID的元素将返回
typeof$（this）。prop（'ID'）=“未定义”
>
true
？你也可以找到一些关于如何正确使用.@RokoC.Buljan的好建议。我的坏，我在测试中一直使用
.attr（'id'）
，然后在没有检查它是否不同的情况下更改为
.prop（'id'）
。你是正确的。返回“未定义”的是
.attr（'id'）
干净简单的溶液
    count = function() {
            $('div > p').each(function(index, el){
            el.id = 'para-'+index;
            });
    };

<h1>Count paragraphs</h1>
<p></p>
<p></p>
<p></p>
<button onclick='countParagraphs()'>Count it!</button>

function countParagraphs() {
    var count = 0;
    $("p").each( function() {
        count ++;
        $(this).html( "This is paragraph " + count ).attr( "id", count );
    });
}

function count() {
        var par = document.getElementsByTagName('p');
        for (var i=0,j=par.length;i<j;i++) {
            par[i].setAttribute('id',i);
        }
    }