제이쿼리 아이디나 클래스 선택에 문의 드립니다.
본문
안녕하세요 사내 해결할 사람이 없어 이렇게 문의를 드립니다.
이 경우에는 정상적으로 #External 이라는 엘리먼트에 두번째 만 block 됩니다.
<style>
#External { display:none; }
</style>
<div id="External">1</div>
<div id="External">2</div>
<div id="External">3</div>
<script>
$(document).ready(function($) {
$("#External").eq(1).css("display","block");
});
</script>
문제는 이럴 경우 #External display 이라는 div 가 블럭이 되질 않습니다.
<style>
#External { display:none; }
</style>
<div id="External display">1</div>
<div id="External display">2</div>
<div id="External display">3</div>
<script>
$(document).ready(function($) {
$("#External").eq(1).css("display","block");
$("#display").eq(1).css("display","block");
});
</script>
이렇게 id나 class가 다중 적용된 요소는 제이쿼리로 어떻게 적용시켜야 하나요?
답변 1
애초에 id 사용법을 잘못 알고 계시네요.
id는 한 페이지에서 유일해야 합니다.
저런 경우는 class를 사용하셔야 합니다.
.eq(n) 메소드는 equal의 준말이라 보시면 됩니다.
n번째 index랑 매칭이 되는 애만 선택해 줍니다.
근데 질문 자체는 무얼 하려고 하시는지 모르겠네요.
아래는 class가 External인 애들 중에서 index가 0보다 큰 애들만 적용을 하는 경웁니다.
.eq() 메소드는 :eq() 셀렉터도 있는 반면에 :gt()는 셀렉터뿐이 없네요.
<script type="text/javascript">
$(function() {
$(".External:gt(0)").css("display", "none");
});
</script>
<div class="External display">1</div>
<div class="External display">2</div>
<div class="External display">3</div>
답변을 작성하시기 전에 로그인 해주세요.