javascript - 将渐进式 id 关联到 html 元素

标签 javascript html

我有一个 html 页面,其中有几个 <div><p>我会给他们每个人分配一个渐进的数字标识符。我希望用 JavaScript 来完成此操作。

我是这样做的,但不知道是否正确。有更好的方法吗?谢谢

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <script>
        var id = -1;
        function createId() {
            return id++;
        }
    </script>
</head>

<body>
    <div id = "createId();">
            createId();
            <h1 id = "createId();">CHAPTER I</h1>
            <h2 id = "createId();">Down the Rabbit-Hole</h2>
            <div id = "createId();"></div>
            <p id = "createId();"><strong>Alice</strong> was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it,<i> 'and what is the use of a book,'</i> thought Alice<i> 'without pictures or conversations?’.</i></p>

            <p id = "createId();">So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a <strong>White Rabbit</strong> with pink eyes ran close by her.
            There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself, <i>'Oh dear! Oh dear! I shall be late!'</i> (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural). But when the <strong>Rabbit</strong> actually took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, <strong>Alice</strong> started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge.</p>

    </div>
</body>

最佳答案

嵌入 Javascript 是 HTML 通常是一个坏主意,尝试将它们分开。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="/js/your-script-file.js">/script>
</head>

<body>
   <div>
     <h1>CHAPTER I</h1>
     <h2>Down the Rabbit-Hole</h2>
     <div></div>
     <p><strong>Alice</strong> was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it,<i> 'and what is the use of a book,'</i> thought Alice<i> 'without pictures or conversations?’.</i></p>
     <p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a <strong>White Rabbit</strong> with pink eyes ran close by her.
            There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself, <i>'Oh dear! Oh dear! I shall be late!'</i> (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural). But when the <strong>Rabbit</strong> actually took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, <strong>Alice</strong> started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge.</p>
  </div>
</body>

然后给每个节点添加一个id。

function addIds() {

    var nodes = document.body.getElementsByTagName('*');
    var id = 1; 

    for( var i = 0; i < nodes.length; i++ ) {
        nodes[i].id = 'unique' + id++
    }

}

addIds();

为什么要加上唯一的前缀?

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

关于javascript - 将渐进式 id 关联到 html 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32633838/

相关文章:

javascript - 如何动态加载highcharts

javascript - 使用 Pusher.com API 处理客户端到客户端事件

javascript - 如何在JavaScript中附加字符串并在同一行中预增量

javascript - ReferenceError:找不到变量:$

html - 是否甚至加载了指定媒体之外的 LINKed 样式表?

html - 如何使用评论记录网页 HTML 和 CSS

html - "display: inline-flex"的元素有一个奇怪的上边距

javascript - 如何使用JS转换HTML中的日期格式?

javascript - 如何在 AngularJS 中的独立组件之间建立通信

javascript - 通过函数了解 ES6 中的 Yield