[jQuery] #6 This로 index 확인하기

1. This 연습하기

 

 참조 : https://ddcloud.tistory.com/66

[JS] #11 This

 

 위의 내용으로 자바스크립트를 사용했었던 This를 되새겨보자!
 jQuery에서도 this를 활용해보려 한다.

 우선 아래와 같은 버튼들을 만들었다.

 

 

 이 버튼들을 눌렀을 때 각각의 버튼의 인덱스와 버튼의 정보들을 알아보려한다.

 제이쿼리에서도 자바 스크립트와 마찬가지의 기능인 this를 사용할 수 있다.

 

 그러면 우선 자바 스크립트의 문법으로 this를 사용해보자.

 

1) JavaScript 문법으로 this 사용하기

this.style.color="red";

 글씨를 누르면 빨갛게 바뀌게 해두었다.

 (아래 실습에서는 2번으로 적용시켜두었다)

 

2) jQuery 문법으로 this 사용하기

 jQuery에서 this를 사용할 때는 자바스크립트 요소 객체 this를 jQuery 객체 S(this)로 변경한 후 사용

 여기서 자바 스크립트처럼 this.css()로 문법을 작성하면 에러가 나니 유의하여야 한다.

$(this).css("color", "blue");

 

 다음으론 버튼을 누르면 파랑색으로 바뀌게 만들어두었다.

 

 

2. This를 활용하여 인덱스 알아보기

 

1) 클릭한 요소의 인덱스 가져오기

 jQuery에서 index() 메서드는 부모요소로부터 몇 번째 자녀요소인지를 알려주는 메서드이다.

 형식은 아래와 같다.

$(this).index();

 

 이 메서드를 사용하여 클릭한 요소의 인덱스(순서)를 가져오게 했다.

let idx = $(this).index();
alert(idx);

$("#exBox .btn").click(function(){
    let idx=$(this).index();    
    var color = $(this).css("background-color");
    var txt = $(this).text();
    
    $("#index").text(idx);
    $("#color").text(color);
    $("#text").text(txt);
}); // click end

 

---

클릭한 요소의 인덱스 얻기(index)

---

this 연습

클릭한 버튼 정보

클릭한 버튼의 index : ?

클릭한 버튼의 뒷배경색 : ?

클릭한 버튼의 글자 : ?

---

 

 

 최종 결과물이다.

 위의 버튼들을 누르면 인덱스의 숫자가 알림창으로 뜨게 되고,

 아래의 버튼들은 인덱스와 속성 정보들을 출력시켜줄 것이다.