將漸進式id與html元素相關聯

我有一個帶有幾個<div>和<p>的html頁面，我將爲它們分配一個數字標識符progressive。我希望在JavaScript中完成。將漸進式id與html元素相關聯

我是這樣做的，但我不知道它是否正確。有更好的方法來做到這一點？謝謝

<!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>

來源

2015-09-17 lonely

你意識到這個屬性（'id'）沒有被解釋，所以從字面上*每個*元素的id都是'createId（）;' – Jamiec

這個--->'id =「createId（）; 。 –

你是否被迫使用JS？這應該做服務器端恕我直言。不要混合js和html。只做一個create_id函數，爲每個元素提供相同的類，並且函數應該循環並添加ID。不要忘記檢查一個ID是否已經存在，因爲它們是唯一的。 – FLX

而不是每次有輸出功能，你可以只創建一個window.onload功能。

window.document.onload = function(e) { 
    var all = document.getElementsByTagName("*"); 
    var i = -1; 
    for(var x = 0; x <= all.length; x++) { 
    // test the tag - what types need to be assigned an id? 
    if (elem.tagName != "DIV" && elem.tagName != "P") continue; 
    i++; 
    all[x].setAttribute("id", i); 
    } 
}

來源

2015-09-17 15:17:47 Stumblor

嵌入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和名稱標記必須以字母開頭（[A-ZA-Z]），並且可以是後跟任意數量的字母，數字（[0-9]），連字符（「 - 」），下劃線（「_」），冒號（「：」）和句點（「。」）。

來源

2015-09-17 15:18:07 Tim

這應該在頁面加載後運行 - 您可能在這裏遇到競爭情況。 – Stumblor

方式一：

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

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

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

<body> 
<script> 
var text= 
' <div id = "createId();">\n'+ 
'   createId();\n'+ 
'   <h1 id = "createId();">CHAPTER I</h1>\n'+ 
'   <h2 id = "createId();">Down the Rabbit-Hole</h2>\n'+ 
'   <div id = "createId();"></div>\n'+ 
'   <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>\n'+ 
'\n'+ 
'   <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.\n'+ 
'   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>\n'+ 
' </div>'; 
document.write(text.replace(/createId\(\);/g, createId)); 
</script> 
</body> 
</html>

我認爲使用PHP是，如果能更好。

來源

2015-09-17 15:19:39 MikeCAT

將漸進式id與html元素相關聯

回答

相關問題