jquery $(this).index() 질문드립니다.

jquery $(this).index() 질문드립니다.

QA

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의 인덱스가 올바르게 표시되며, 클릭한 항목의 텍스트만 '주제 변경'으로 변경됩니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 2,660
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT