JSFiddle - React, Tailwind, and code Playground

HTML

<div class="type1"></div>
<div class="type2"></div>
<div class="type3 on"></div>
<div class="type4"></div>

CSS

div{position:absolute;width:20px;height:20px;}
div.type1{left:0;top:0;background:red}
div.type2{left:50px;top:0;background:blue}
div.type3{left:0;top:50px;background:gray}
div.type4{left:50px;top:50px;background:orange}

JavaScript

var $divEles = $('div');
var divEles = document.getElementsByTagName('div');


console.log('첫번째 div의 class명은', divEles[0].getAttribute('class'), '입니다.');


console.log('-------- for -----------');
for(var i = 0; i < $divEles.length; i++) {
  var className = $divEles.eq(i).attr('class');
  var bgColor = $divEles.eq(i).css('background-color');
  var isOn = $divEles.eq(i).hasClass('on');
  
  console.log(className, bgColor);
  if(isOn) {
    console.log('.on을 가진 엘리먼트는', i, '번째 입니다.');
  }
}


console.log('-------- each -----------');
$divEles.each(function(i, target) {
	var className = $(target).attr('class');
  var bgColor = $(target).css('background-color');
  var isOn = $(target).hasClass('on');
  console.log(className, bgColor);
  
  if(isOn) {
    console.log('.on을 가진 엘리먼트는', i, '번째 입니다.');
  }
  
});