使用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

回答

相关问题