티스토리 댓글 정렬 버튼 만들기

- 티스토리의 기본적인 댓글 정렬 방식. 먼저 달린 댓글 순으로 정렬됩니다.

아래 작성될 내용은 저의 댓글 형식을 기준으로 설명합니다. 본인의 html과 비교해서 적절히 적용해주세요.

<s_rp_container>
    <div class="comments-container latest inner">
        <div class="sort-comments">정렬 : <span class="sort sort-latest">최신순 <i class="icon-sort-numeric-desc"></i></span><span class="sort sort-old">오래된순 <i class="icon-sort-numeric-asc"></i></span></div>
        <ol id="comments-list" class="comments-list">
            <s_rp_rep>
                <li>
                    <div class="comment-main-level ">
                        <div class="comment-avatar"><img src="" alt="Profile"></div>
 
                        <div class="comment-box">
                            <div class="comment-head">
                                <h6 class="comment-name"></h6>
                                <span class="date"> </span>
                                <a href="javascript:void(0)" onclick="" class="modify">&nbsp;<span><i class="icon-edit"></i></span></a> <a href="javascript:void(0)" onclick="" class="write">&nbsp;<span><i class="icon-reply"></i></span></a> </div>
                            <div class="comment-content" id=""></div>
                        </div>
                    </div>
                    <s_rp2_container>
                        <ul class="comments-list reply-list">
                            <s_rp2_rep>
                                <li>
                                    <div class="comment-avatar"><img src="" alt="Profile"></div>
 
                                    <div class="comment-box ">
                                        <div class="comment-head">
                                            <h6 class="comment-name"></h6>
                                            <a href="javascript:void(0)" onclick="" class="modify">&nbsp;<span><i class="icon-edit"></i></span></a>
                                            <span class="date"></span>
                                        </div>
                                        <div class="comment-content" id=""></div>
                                    </div>
 
                                </li>
                            </s_rp2_rep>
                        </ul>
                    </s_rp2_container>
                </li>
            </s_rp_rep>
        </ol>
    </div>
</s_rp_container> 

댓글을 최신순으로 정렬하고 싶은 경우

댓글 목록들의 부모의 css를 변경합니다.

.comments-list ol{
    display: flex;
    flex-direction: column-reverse
} 

flex-direction 항목을 보시면 아시겠지만, 내부의 항목들을 세로로 정렬하되, 순서는 거꾸로 하도록 하는 방식입니다.

정렬 버튼을 만들고 싶은 경우

<div class="sort-comments">정렬 : 
    <span class="sort sort-latest">최신순 <i class="icon-sort-numeric-desc"></i></span>
    <span class="sort sort-old">오래된순 <i class="icon-sort-numeric-asc"></i></span>
</div>

먼저 버튼을 하나 만들어줍니다.

$(".sort").click(function () {
    $(".comments-container").toggleClass("latest")
});

간단한 스크립트를 하나 넣어줍니다.

스크립트 내에서 해결해도 되지만, 전 간단하게 toggleClass 하나 줘놓고 나머지는 css에서 작업했습니다.

.comments-container .sort-latest,
.comments-container.latest .sort-old {
    display: none
}

.comments-container.latest .sort-latest {
    display: inline
}

.guestList ol,
.commentList .latest ol {
    display: flex;
    flex-direction: column-reverse
}

.commentList ol,
.guestList .latest ol {
    display: flex;
    flex-direction: column
}

1~7 : 댓글들을 감싼 부모에게 "latest"란 class가 있다면 '오래된순'을 표시하지 않고, 없다면 "최신순"을 표시하지 않습니다.

8~17 : 오래된 댓글부터 정렬하는 댓글 목록엔 "latest"란 class가 있으면 역순으로 정렬하도록, 최신 방명록부터 정렬하는 방명록 목록엔 "latest"란 class가 없으면 역순으로 정렬하도록 합니다.

마무리

위의 과정만 끝내고 마무리를 하셔도 사용하는 덴 아무런 지장이 없지만, 댓글이 하나만 있을 때는 어떤 방식으로 정렬해도 결과가 똑같기에 댓글이 하나만 있을 때는 버튼을 없애주도록 합시다.

$(function () {
    var p = $(".comment-main-level").length,
        q = $(".sort-comments");
    1 < p ? q.show() : q.hide()
})

여기서 "comment-main-level"은 <s_rp_rep> 에 첫 번째로 있는 li의 자식항목입니다.

$(function () {
    var p = $(".comment-main-level").length,
        q = $(".sort-comments"),
        u = $(".comments-list");
    1 < p ? q.show() : (q.hide(), u.css("margin", "0"))
})

저의 경우는 버튼과 댓글 목록 사이에 여백을 주기 위해 댓글 목록에 margin 값을 줘놨기에, 댓글이 하나뿐이면 댓글 목록의 margin 값을 0으로 만드는 스크립트도 추가해뒀습니다.