Question

我想为HTML文件中的段落指定唯一ID 我如何在JavaScript中使用循环？（假设我知道其中的段落数量）

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        function count() {
            var num = $("p").size();
            for (var i = 0; i < num; i++) {
                $ "p".innerhtml();
                $id = i;
                I dont know
                if this is right.is this how we assign ids ?
            }
        }
    </script>
</head>

<body>
    <h1>Count paragraphs</h1>
    <div>
        <p>This is paragraph 1.</p>
        <p>This is paragraph 2.</p>
        <p>This is paragraph 3.</p>
        <p>This is paragraph 4.</p>
    </div>
    <form action="">
        <input type="button" value="count" onclick="count()"></input>
    </form>
</body>

Answer 1

<强> jsBin demo

<强>的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
});

以上使用idx, currID方法回调的.prop()（索引，值）参数并且它会将pN（从0开始的N）分配给您的所有<p>，而不会覆盖现有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>

P.S：</input>是一个非法的结束标记。 ^{（See: Void elements）功能}

Answer 2

尝试使用.each()和.prop()方法，例如：

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
           }
        });
}

有效身份证不能只是数字，所以我用短语“para - ”作为前缀

Answer 3

试试这个：

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

这将基本循环遍历所有'p'元素。在给予每个函数的函数的上下文中，这表示HtmlElement。您可以直接分配ID。没有必要将HtmlElement包装在jQuery对象中，因为可以在raw元素上访问id。

JsFiddle（您必须检查结果中的Html以查看ID）

Answer 4

下面：

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

＆gt;用于直接孩子。你不必担心因为它是非法的。

http://jsfiddle.net/mirohristov/ywadbga0/1/

Answer 5

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

Answer 6

如果你想要innerHTML或id属性，我没有得到，但我会以两种方式做到这一点。

HTML

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

Javascript（使用Jquery）

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

使用JavaScript为Elements分配ID

6 个答案: