how to add id attribute and unique id inside html div tag
Question
I want to add id attribute and also unique id in the id attr. i tried but getting objects inside the id attribute
$("div .abc").each(function() { $('.abc').attr('id', $(this).uniqueId()); })
[id]::before { content: attr(id); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script> <div class="xyz"> <div class="abc"></div> <div class="abc"></div> <div class="abc"></div> </div>
3 answers
solution1
1 ACCPTED 2021-11-13 13:02:13
The jQueryUI .uniqueId() method does all the work you need internally. It returns a jQuery object, which is why you see what looks like an object. All you need in the .each() callback is
$(this).uniqueId();
In fact you don't even need the .each() :
$("div .abc").uniqueId();
will iterate through the matched elements and give each one a unique id value.
solution2
0 2021-11-13 12:59:44
yu can auto increment an id to an html element using either each loop or for loop
each loop like this;
$(".abc").each(function(i) {
$(".abc").attr('id', 'id' + i);
})
or using for loop
for(var i = 0, i = $(".abc").length, i++){
$(".abc").attr('id', 'id' + i);
}
solution3
0 2021-11-13 13:03:34
Full code is here
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="xyz">
<div class="abc"></div>
<div class="abc"></div>
<div class="abc"></div>
</div>
</body>
<script>
$(".abc").each(function (index) {
$(this).attr("id", "abc" + index);
});
</script>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.