노드의 이동과 if문에 관한 질문입니다.
안녕하세요. 주말 잘 보내시고 계시는가요?
헷갈리는 것이 있어서 이렇게 질문을 올려봅니다.
<style>
body {
font-size: 9pt;
font-family: "굴림";
}
div,
p,
ul,
li {
border: 1px #eeeeee solid;
margin: 10px;
}
ul {
padding: 10px;
}
li.select {
background-color: #ccc;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
/*
예제04: 실행화면처럼 클릭한 메뉴 아이템을
세 번째 메뉴(menu3)의 다음 노드로 이동시켜 주세요
*/
$(document).ready(function() {
var $menu = $("ul.menu");
$("ul.menu li").click(function() {
if ($(this).hasClass("select") == true)
return;
$(this).insertAfter(".select");
})
});
</script>
<body>
<ul class="menu">
<li>menu1</li>
<li>menu2</li>
<li class="select">menu3</li>
<li>menu4</li>
<li>menu5</li>
<li>menu6</li>
</ul>
</body>
위 소스를 보시면
if구문의 뜻을 모르겠습니다.
즉, if구문을 해석하면,
클릭한 li가 select 클래스를 가지고 있다면 리턴하라는 말인데..
이게 무슨 뜻인지 감을 못 잡겠네요.
실험적으로 if구문을 없애고 해봐도,,별차이가 없더군요.
책에는 왜 if구문이 나왔는지,,이게 뜻하는 바가 뭔지 그게 궁금합니다.
늘 답변에 감사드리오며,
주말 잘 보내세요. ^^
올리신 소스를 보시면 li 영역을 클릭했을 때 .select 클래스를 갖고 있는 li 아래에 현재 클릭한 li를 삽입하도록 되어있습니다.
소스 상의 if문은 이미 .select 클래스를 갖고 있는 li를 클릭했을 때에 대한 처리를 한 것입니다.
즉, 이미 .select 클래스를 갖고 있는 li인 3번 menu를 클릭했을 때는 아무 것도 하지 않도록 처리한 코드입니다.
함수를 실행하다가 return문을 만나면 더 이상 함수의 나머지 부분을 실행하지 않기 때문에 .select를 가진 li를 클릭했을 때는 insertAfter() 함수가 실행되지 않는 것입니다.