jQuery 기초 eq() 실습
eq()는
select() 선택자를 기본으로 하되 id 혹은 name 혹은 class 를 이용해서만 지정하는것이 아닌
추가적으로 목록에서의 몇번째를 지정할 때 유용하게 사용하는 선택자 입니다.
또한 방식의 차이로 :eq(2) 이런식으로도 지정을 할수 있고 다중선택을 할수도 있습니다.
## 유의사항 ##
3번째를 지운상태에서. 또 다시 3번째를 지울때 최신 상태에서 다시 한번 3번째를 찾게됩니다.
(지운 태그 부분을 다시한번 3번째로 지정하지 않음)
<head>
<title>제목 없음</title>
<style type="text/css">
/* 구분을 위해 스타일 적용하기 */
.box { clear:both; }
.div_class { border:1px solid; margin:10px 0; padding:10px; line-height:24px; } /* div_class는 모두 적용하기 */
.span_class { border:1px solid #ddd; } /* span_class는 모두 적용하기 */
.span_textblue { color:blue; } /* 텍스트색상 파란색으로 */
.span_textred { color:red; } /* 텍스트색상 빨간색으로 */
#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 스터디 eq() -->
<div class="box">
<div id="div1_id" class="div_class">
<span id="span1_id" class="span_class span_textblue">첫번째 영역 div 태그의 span 태그 첫번째 입니다.</span><br />
<span id="span2_id" class="span_class">첫번째 영역 div 태그의 span 태그 두번째 입니다.</span><br />
<span id="span3_id" class="span_class">첫번째 영역 div 태그의 span 태그 세번째 입니다.</span><br />
<span id="span4_id" class="span_class">첫번째 영역 div 태그의 span 태그 네번째 입니다.</span><br />
<span id="span5_id" class="span_class">첫번째 영역 div 태그의 span 태그 다섯번째 입니다.</span><br />
<span id="span6_id" class="span_class">첫번째 영역 div 태그의 span 태그 여섯번째 입니다.</span><br />
<span id="span7_id" class="span_class">첫번째 영역 div 태그의 span 태그 일곱번째 입니다.</span><br />
<span id="span8_id" class="span_class">첫번째 영역 div 태그의 span 태그 여덟번째 입니다.</span><br />
<span id="span9_id" class="span_class">첫번째 영역 div 태그의 span 태그 아홉번째 입니다.</span><br />
<span id="span10_id" class="span_class ">첫번째 영역 div 태그의 span 태그 열번째 입니다.</span><br />
</div>
<div id="div2_id" class="div_class">
<span id="span2_1_id" class="span_class span_textblue">두번째 영역 div 태그의 span 태그 첫번째 입니다.</span><br />
<span id="span2_2_id" class="span_class">두번째 영역 div 태그의 span 태그 두번째 입니다.</span><br />
<span id="span2_3_id" class="span_class">두번째 영역 div 태그의 span 태그 세번째 입니다.</span><br />
<span id="span2_4_id" class="span_class">두번째 영역 div 태그의 span 태그 네번째 입니다.</span><br />
<span id="span2_5_id" class="span_class">두번째 영역 div 태그의 span 태그 다섯번째 입니다.</span><br />
<span id="span2_6_id" class="span_class">두번째 영역 div 태그의 span 태그 여섯번째 입니다.</span><br />
<span id="span2_7_id" class="span_class">두번째 영역 div 태그의 span 태그 일곱번째 입니다.</span><br />
<span id="span2_8_id" class="span_class">두번째 영역 div 태그의 span 태그 여덟번째 입니다.</span><br />
<span id="span2_9_id" class="span_class">두번째 영역 div 태그의 span 태그 아홉번째 입니다.</span><br />
<span id="span2_10_id" class="span_class ">두번째 영역 div 태그의 span 태그 열번째 입니다.</span><br />
</div>
</div>
<div class="box">
<button type="button" onclick="btn1();">btn1()</button>
<button type="button" onclick="btn2();">btn2()</button>
<button type="button" onclick="btn3();">btn3()</button>
<button type="button" onclick="btn4();">btn4()</button>
</div>
<script type="text/javascript">
// 위 기본태그를 이용해 여러가지 jQuery 실습을 합니다.
// 앞에서 7번째 0,1,2,3,4,5,6 순
function btn1() {
jQuery("#div1_id>span").eq(3).remove();
}
// 끝에서 2번째 -1,-2,-3,-4 순
function btn2() {
jQuery("#div1_id>span").eq(-2).remove();
}
// 다른방식의 선택
function btn3() {
jQuery("#div1_id>span:eq(5)").remove();
}
// 다중 선택
function btn4() {
jQuery("#div2_id>span:eq(1),#div2_id>span:eq(3),#div2_id>span:eq(5),#div2_id>span:eq(7)").remove();
}
</script>
</body>
'jQuery 기초' 카테고리의 다른 글
| jquery click() (0) | 2017.12.13 |
|---|---|
| jquery hide() show() (0) | 2017.12.12 |
| jquery append() (0) | 2017.12.11 |
| jquery attr() (0) | 2017.12.08 |
| jquery select() (0) | 2017.12.08 |
댓글