■ 이미지
■ 코드
<style>
.wrap > .con{
height: 50px;
}
.wrap > div > p > .sbox{
display: inline-block;
width: 4px;
height: 12px;
background-color: gainsboro;
margin-right: -2px;
}
.wrap > div > p > .sbox.act{
background-color: #000;
}
</style>
<body>
<div class="wrap">
<div class="con">
<p>강조
<span class="sbox"></span>
<span class="sbox"></span>
<span class="sbox"></span>
<span class="sbox"></span>
<span class="sbox"></span>
<span class="num">3</span>
</p>
</div>
<div class="con">
<p>강조
<span class="sbox"></span>
<span class="sbox"></span>
<span class="sbox"></span>
<span class="sbox"></span>
<span class="sbox"></span>
<span class="num">2</span>
</p>
</div>
<div class="con">
<p>강조
<span class="sbox"></span>
<span class="sbox"></span>
<span class="sbox"></span>
<span class="sbox"></span>
<span class="sbox"></span>
<span class="num">4</span>
</p>
</div>
</div>
<script>
$(function(){
$(".con").each(function(index, value){
//each(f(in,va)) in 숫자 0~ va 각각의 .con
let num = parseInt($(value).find(".num").text());
//parseInt() 괄호안의 문자를 숫자로 변경해준다.
//$(value) value j쿼리형태로 바꿔서 J쿼리 함수사용
//find() 제이쿼리 함수 내 자식들중에서 찾기
//text() 안에있는 글자를 선택한다.
//let num = num이라는 이름에 저장하겠다.
$(value).find(".sbox").each(function(index,va){
//만약에 num에 들어있는 숫자보다 작은 .sbox에
//클래스 act를 추가하겠다.
// 숫자가 2이면 index 0 1
if(index<num){
$(va).addClass("act");
}
});
});
});
</script>
</body>