Question

我一直试图使用javascript为我的div（1,2,3 ......）编号。

HTML：

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

使用Javascript：

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

我怎样才能让它真正起作用？

Answer 1

您可以尝试这样的事情，

＆＃13;

<!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) {
	newId=++newId;
	elementthis.setAttribute("id", newId);
	}
</script>
</body>
</html>

＆＃13;

您必须将您的id变量设为全局变量，否则更改将不会保存在其中。
您还必须在函数中分配变量，以查看每个div的变量的后续增加。

Answer 2

您可以将它们包装在父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>

编辑：运行检查上面的代码，你会看到你正在寻找的结果。

Answer 3

您可以设置parent的ID。并创建函数来设置其下每个id的{{1}}。请尝试这个：

＆＃13;

div

＆＃13;

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

＆＃13;

Answer 4

这是要走的路：

＆＃13;

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

＆＃13;

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

＆＃13;

您无法评估<div class="nextClass">1</div> <div class="nextClass">2</div>属性中的Javascript，因此您必须稍后更新这些ID。

还要记住，id不能以数字开头。

使用javascript函数编号Div

4 个答案: