爲div添加獨特的類

Question

我想爲每個div添加一個新類但唯一，我如何使用jQuery創建此類？

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

CodePen Project

Answer 1

使用jQuery的each()和attr()功能嘗試.Better嘗試id而不是class獨特

對於uniqueid。

$('.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

包括所有的div到包裝。

<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

快速，純JS方法：

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

您可以使用此代碼

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

試試這個：

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