오늘은 closest() 함수에 대해 알아볼게요~
어떤 태그의 부모태그를 찾는데 부모태그들 중 태그명이나 클래스명, 아이디 등을 지정해 찾는 방법입니다.
바로 상위(부모태그) 태그가아닌 부모의 부모의 부모의 부모의 부모 태그에 잇더라도 클래스명이나 아이디 혹은 태그명이 내가 찾는 것이라면
그 부모태그를 찾아주는 기능입니다.
여기에서는 게시글을 삭제하는 기능을 구현할때 [삭제] 버튼 클릭시 클릭한 삭제버튼의 부모태그 li 태그를 찾기 위해서 사용합니다.
물론 부모태그 parent() 태그를 이용해도 가능합니다.
단 삭제버튼이 li 바로 자식태그로 존재할 경우에는 (삭제버튼태그).parent() 한번호출 해서해야되고
만일 삭제 버튼이 자식태그의 자식태그에 존재할 경우에는 (삭제버튼태그).parent().parent() 두번호출으 해야합니다.
깔끔하게 closest() 태그로 삭제버튼이 위치한 게시글 라인을 구성하는 li 태그를 찾아 삭제하는 기능을 실습해보겠습니다.
<head>
<title>제목 없음</title>
<style type="text/css">
/* 구분을 위해 스타일 적용하기 */
.box { clear:both; }
.div_class { width:800px; border:1px solid; margin:10px 0; padding:10px; line-height:24px; } /* div_class는 모두 적용하기 */
.table>li{list-style-type:none;}
.table>li>span{float:left;}
.table>li>.title {width:60%;}
.table>li>.writer {width:15%;}
.table>li>.date {width:15%;}
.table>li>.del {width:10%;cursor:pointer;}
.table>li>.reply {width:95%;margin-left:5%;}
#div1_id { float:left; border-color:red;}
#div2_id { float:left; border-color:blue;}
</style>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<!-- jQuery 스터디 -->
<div class="box">
<div id="div1_id" class="div_class">
<ul class="table">
<li>
<span class="title">[공지사항] 게시글 양식에 맞춰서 작성해주세요</span><span class="writer">관리자</span><span class="date">2017.12.14</span><span class="del">[삭제]</span>
<span class="reply">ㄴ 문의도 올려도되나요? 1234</span>
<span class="reply">ㄴ 문의도 올려도되나요? 55555555555555</span>
</li>
<li>
<span class="title">[문의] 함수 호출은 어떻게 하는 건가요?</span><span class="writer">궁금이1</span><span class="date">2017.12.14</span><span class="del">[삭제]</span>
<span class="reply">ㄴ 게시글 52번을 참고해주세요!!</span>
</li>
<li>
<span class="title">[일반] 알려드립니다ㅎㅎㅎ 객체 선택시 속도 최적화 하는방법</span><span class="writer">난고수임</span><span class="date">2017.12.14</span><span class="del">[삭제]</span>
<span class="reply">ㄴ 좋은정보 감사합니다</span>
<span class="reply">ㄴ 잘보고갑니다</span>
</li>
<li>
<span class="title">[문의] 객체에 스타일속성으로 직접해도 되나요?</span><span class="writer">천재코더</span><span class="date">2017.12.14</span><span class="del">[삭제]</span>
<span class="reply">ㄴ 직접하셔도 상관없습니다~</span>
<span class="reply">ㄴ 하나하나 다하셔야 될거에요 ㅠㅠ</span>
</li>
<li>
<span class="title">[문의] 안녕하세요 가입했습니다. 많이 알려주세요~~</span><span class="writer">나도초보</span><span class="date">2017.12.14</span><span class="del">[삭제]</span>
<span class="reply">ㄴ 어서오세요~</span>
</li>
<li>
<span class="title">[일반] 여기 뭐하는곳이에요?</span><span class="writer">그냥와봄</span><span class="date">2017.12.14</span><span class="del">[삭제]</span>
<span class="reply">ㄴ jquery 공부게시판이에요~</span>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
// 위 기본태그를 이용해 여러가지 jQuery 실습을 합니다.
jQuery(".del").click(function(){
jQuery(this).closest("li").remove();
});
// parent() 사용예
//jQuery(".del").click(function(){
// jQuery(this).parent().remove();
//});
</script>
</body>
'jQuery 기초' 카테고리의 다른 글
| jquery each() (0) | 2017.12.16 |
|---|---|
| jquery appendTo() (0) | 2017.12.15 |
| jquery click() (0) | 2017.12.13 |
| jquery hide() show() (0) | 2017.12.12 |
| jquery append() (0) | 2017.12.11 |
댓글