[jQuery] 더보기 버튼 load more

HTML

<ul class="box-list n3 more-list js-more-list">
	<li>more list 1</li>
	<li>more list 2</li>
	<li>more list 3</li>
	<li>more list 4</li>
	<li>more list 5</li>
	<li>more list 6</li>
</ul>

<a href="#n" class="btn-more js-btn-more">MORE</a>

CSS

.box-list{
	width: 100%;
}
.box-list:after{
	display: block;
	content: '';
	clear: both;
}
.box-list > li{
	float: left;
	margin-left: 20px;
	margin-top: 20px;
	border: 1px solid #e8e9ee;
}
.box-list.n3{
	margin-top: -20px;
}
.box-list.n3 > li{
	width: calc((100% - 41px)/3);
}
.box-list.n3 > li:nth-child(3n+1){
	margin-left: 0;
}

.more-list > li{
	position: relative;
	height: 390px;
	padding: 70px 50px 50px;
	-webkit-transition: 0.3s ease;
	transition: 0.3s ease;
}

jQuery

if(wWidth < 769){
    loadMore(3);
}else{
    loadMore(9);
}

function loadMore(int){
	$('.js-btn-more').hide();
	if($('.js-more-list > li').length > int){
		$('.js-btn-more').show();
		$('.js-more-list > li').hide();
		$('.js-more-list > li:first-child ~ li:nth-child(' + int + ')').show();
	}
	$('.js-more-list > li').slice(0, int).show(); 
	$('.js-btn-more').on('click',function(e){ 
		e.preventDefault();    
		if(!$('.js-more-list > li:hidden').length == 0){ 
			$('.js-more-list > li:hidden').slice(0, int).show();
		}else{			
			alert('내역이 없습니다.');
			$('.js-btn-more').hide();
		}
	});
}