Fügen Sie eindeutige Klassen zu Divs

Question

Ich möchte zu jedem Div eine neue Klasse hinzufügen, aber einzigartig, wie kann ich dies mit jQuery machen?

<div class="pat"></div> 
<div class="pat"></div> 
<div class="pat"></div> 

CodePen Project

Answer 1

mit each() und attr() Funktion von jquery Versuchen id statt class für einzigartige

Für uniqueid .Better zu versuchen.

$('.pat').each(function(a,b,c){ 
 
$(this).attr('id',$(this).attr('class')+a) 
 
}) 
 
console.log($('body').html())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="pat"></div> 
 
<div class="pat"></div> 
 
<div class="pat"></div>

Answer 2

Fügen Sie alle div in Wrapper.

<div id="wrapper"> 
     <div class="pat"></div> 
     <div class="pat"></div> 
     <div class="pat"></div> 
    </div> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#wrapper div").each(function(key){ 
    $(this).addClass("newclass"+ key); 
    }); 
}); 

</script> 

Answer 3

Schnell, pure-js Methode:

// for adding unique classes: 
 
// var divs = document.querySelectorAll('.pat'); 
 
// [].forEach.call(divs,(el,i)=>{ 
 
// el.classList.add('myclass_'+i) 
 
// }) 
 

 
//for adding unique id's 
 
var divs = document.querySelectorAll('.pat'); 
 
[].forEach.call(divs,(el,i)=>{ 
 
    el.id = 'myId_'+i; 
 
})

<div class="pat"></div> 
 
<div class="pat"></div> 
 
<div class="pat"></div> 
 
<div class="pat"></div> 
 
<div class="pat"></div> 
 
<div class="pat"></div> 
 
<div class="pat"></div> 
 
<div class="pat"></div> 
 
<div class="pat"></div> 
 
<div class="pat"></div> 
 
<div class="pat"></div> 
 
<div class="pat"></div> 
 
<div class="pat"></div> 
 
<div class="pat"></div> 
 
<div class="pat"></div> 
 
<div class="pat"></div> 
 
<div class="pat"></div> 
 
<div class="pat"></div> 
 
<div class="pat"></div> 
 
<div class="pat"></div> 
 
<div class="pat"></div>

Answer 4

Sie diesen Code verwenden können

var divElements = document.getElementsByTagName('div'); 
console.log(divElements.length); 
var c=0; 
Array.prototype.forEach.call(divElements,function(a) { 
    a.classList = "div-" +c; 
    c++; 
    console.log(a); 
}) 

Answer 5

Try This:

$(document).ready(function(){ 
 

 
     $("div").each(function(index) { 
 
     
 
      $(this).addClass('pat'+index) 
 
      
 
    }); 
 
});

.pat0 { 
 
    \t background-color: red; 
 
} 
 

 
.pat1 { 
 
     background-color: blue; 
 
} 
 

 
.pat2 { 
 

 
     background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div class="pat">Pat0</div> 
 
<div class="pat">Pat1</div> 
 
<div class="pat">Pat2</div>