jquery $(this).index() 질문드립니다.
본문
안녕하세요.
=== 첫번째 질문
아래 문장 똑같은게 5개가 있다고 하면
클릭한곳에 $(this).addClass 하면 정상적으로 잘 바뀌는데
idx=$(this).index(); 값은 항상 0으로만 표시됩니다.
클릭한곳 순번이 나오게 할려면 어떻게 해야 되나요?
=== 두번째 질문
아래처럼 똑같은 문장 5개가 있으나 클릭한곳만 글씨를
변경하고 싶은데 아래 처럼하면 5개 모두 변경이 됩니다.
3번째 문장만 바꾸고 싶으면 어떻게 해야 되나요?
$('.u_cbox_write_wrap .u_cbox_guide').text('주제 변경');
1.답글을 입력하세요
2.답글을 입력하세요
3.답글을 입력하세요 => 주제 변경
4.답글을 입력하세요
5.답글을 입력하세요
<script src="./js/jquery-1.12.4.min.js"></script>
<script>
$(document).on("click",".u_cbox_write_wrap",function(e){
var idx=$(this).index(); // idx값을 가져오지 못함 0으로만 표시됨
alert(idx);
$(this).addClass('u_cbox_focus'); // 정상
});
</script>
<div class="u_cbox_write_wrap">
<div class="u_cbox_write_area">
<label for="cbox_module__reply_textarea" class="u_cbox_guide" data-action="reply#htContext#12345#write#placeholder" data-param="@event">답글을 입력하세요</label>
</div>
</div>
답변 1
첫번째 질문
$(this).index(); 메서드는 현재 엘리먼트의 인덱스를 형제 엘리먼트 중에서 찾습니다. 그러나 문서에서 .u_cbox_write_wrap 클래스를 가진 단 하나의 엘리먼트만 있기 때문에 항상 0이 반환됩니다.
.u_cbox_write_wrap 클래스를 가진 모든 엘리먼트를 선택하고 그 중에서 현재 엘리먼트의 인덱스를 찾으려면 다음과 같이 할 수 있습니다:
javascriptCopy code
var idx = $('.u_cbox_write_wrap').index(this);
두번째 질문
클릭한 엘리먼트만 텍스트를 변경하려면 $(this)를 사용하여 현재 엘리먼트를 찾은 다음 .find() 메서드를 사용하여 내부의 .u_cbox_guide 엘리먼트를 찾아야 합니다. 다음과 같이 할 수 있습니다:
$(this).find('.u_cbox_guide').text('주제 변경');
수정된 스크립트
다음 스크립트는 위의 두 가지 변경 사항을 모두 적용한 것입니다:
$(document).on("click",".u_cbox_write_wrap",function(e){ var idx = $('.u_cbox_write_wrap').index(this); alert(idx); $(this).addClass('u_cbox_focus'); $(this).find('.u_cbox_guide').text('주제 변경'); });
이제 클릭한 .u_cbox_write_wrap의 인덱스가 올바르게 표시되며, 클릭한 항목의 텍스트만 '주제 변경'으로 변경됩니다.
감사합니다.
너무 잘되네요.
