使用javascript函數編號的div

我一直在嘗試使用javascript編號我的div（1，2，3 ...）。使用javascript函數編號的div

HTML：

<div id="anId(this)" class="nextClass"></div>

的Javascript：

function anId(elementthis) { 
var newId = 0; 
elementthis.setAttribute("id", newId++); 
}

我怎樣才能讓這個實際工作？

來源

2016-11-20 SCcode

你不把JavaScript函數放在一個id字符串中。 – Fallenreaper

你可以將它們包裝在一個父div中，然後使用一個js腳本來運行該樹併爲該div編號。

的代碼會是這個樣子：

var app = function() { 
 
    var wrapper = document.getElementById('wrapper').childNodes; 
 
    var id = 0 
 
    for (var i = 0; i < wrapper.length; i++) { 
 
    if (wrapper[i].nodeName === "DIV") { 
 
     wrapper[i].id = id; 
 
     id += 1; 
 
    } 
 
    } 
 
}();

<!DOCTYPE html> 
 
<html> 
 

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

 
<body> 
 
    <div id="wrapper"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    </div> 
 
</body> 
 

 
</html>

編輯：運行在檢查上面的代碼，你會看到你正在尋找的結果。

來源

2016-11-20 02:27:31

謝謝，正是我想要做的。 – SCcode

你可以嘗試這樣的事情，

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="ISO-8859-1"> 
 
<title>Insert title here</title> 
 
    <script src="angular.min.js"></script> 
 
</head> 
 
<body> 
 

 
<form class="index-form" name="LoginForm"> 
 
    <div class="index-input" onclick="anId(this)">sdfs 
 
    </div> 
 
    <div class="index-input" onclick="anId(this)">sdfs 
 
    </div> 
 
    <div class="index-input" onclick="anId(this)">sdfsfd 
 
    </div> 
 
    <div class="index-input" onclick="anId(this)">adasd 
 
    </div> 
 
    <div class="index-input" onclick="anId(this)">asdasd 
 
    </div> 
 
</form> 
 
<script> 
 
var newId = 0; 
 
function anId(elementthis) { 
 
\t newId=++newId; 
 
\t elementthis.setAttribute("id", newId); 
 
\t } 
 
</script> 
 
</body> 
 
</html>

你必須讓你的id變量全局變量否則修改將不會被保存在裏面。
您還必須在函數中分配變量以查看每個div的變量隨之增加。

來源

2016-11-20 02:24:10 GraveyardQueen

但是你必須點擊每個ID才能分配一個ID。有什麼方法可以在不需要點擊或觸發任何東西的情況下對ID進行編號？ – SCcode

是的，你可以在body的onload中調用相同的函數，或者你可以在腳本部分定義它，如@Bruno Peres – GraveyardQueen

您可以設置ID爲parent。並創建功能來設置其下的每個div的id。請嘗試這一個：

function setIdChildDivs(id) { 
 
    var newId = 0; 
 
    var d = document.querySelectorAll('#' + id + ' div'); 
 
    d.forEach(function(elm) { 
 
    elm.setAttribute("id", newId++); 
 
    elm.innerText += ' (id:' + newId + ')'; 
 
    }) 
 
} 
 
setIdChildDivs("parent");

<form id="parent" class="index-form" name="LoginForm"> 
 
    <div class="index-input">sdfs 
 
    </div> 
 
    <div class="index-input">sdfs 
 
    </div> 
 
    <div class="index-input">sdfsfd 
 
    </div> 
 
    <div class="index-input">adasd 
 
    </div> 
 
    <div class="index-input">asdasd 
 
    </div> 
 
</form>

來源

2016-11-20 02:30:49 RizkiDPrast

這是要走的路：

let nextId = 1; 
 

 
Array.prototype.forEach.call(
 
    document.getElementsByClassName('nextClass'), div => { 
 
    div.id = `id-${nextId}`; 
 
    nextId++; 
 
    } 
 
);

<div class="nextClass">1</div> 
 
<div class="nextClass">2</div>

在id屬性，所以你不能評估的Javascript必須稍後更新這些ID。

還記得id不能以數字開頭。

來源

2016-11-20 02:30:53

使用javascript函數編號的div

回答

相關問題