블로그를 수정해보자 - 2

 

오늘은 방명록을 수정해보겠다

사진은 비..아니 하이라이트 손동운씨

잘 보면 원래 싸이월드는
방명록 갯수에 따라 No.1, No.2
이런식으로 숫자를 부여하는데
내꺼는 그런게 없다 그래서
그걸 추가해주고 글씨체랑 색도
좀 변경해보겠다 레쭈고.
 

 
이게 원래 블로그의 댓글 구조인데
닉네임 위에 guest_number라는 이름의
span class를 하나 추가해줬다
옆에는 No.를 써주었고
저 자리에 번호를 하나씩 부여 해줄 것이다
 

window.addEventListener('DOMContentLoaded', (event) => {
    const comments = document.querySelectorAll('.comment-list ul li');
    comments.forEach((comment, index) => {
        
        const numberSpan = comment.querySelector('.guest_number');
        if (numberSpan) { 
            const count = comments.length;
            numberSpan.textContent = `No.${count - index}`;
        }
    });
});

 
매우 간단하다
comment-list라는 div 클래스
그 안의 ul 그 안의 li 클래스
그 중 li 클래스들을 모두 세고
index를 부여해준 다음
방금 만든 guest_number를
찾아서 갖다박아버리면 된다
 
굿
 

번호가 잘 부여됐다 굿굿
중간에 1 다음 3 이런식으로
이거지는 경우가 있는데
내가 테스트 해본다고 몇번 쓰고
지워서 그럴 수도 있음 뀨뀨
 

 
근데 사진을 잘 보면
No.랑 그 뒤에 붙는 숫자의
폰트 색상과 크기가 다르다
 
그래서 뒤에 갖다박지 말고 둘이
다른 클래스로 만들어서 두번째
클래스에 숫자를 넣어주도록 하겠다
 

그리고 XX님 이렇게 붙는줄 알았는데
아니더라..?! 그래서 지웠당 뀨뀨쀼쀼
 

수정끗!