개발/jQuery

jQuery (제이쿼리) - jQuery index(), contains

루 프란체 2018. 6. 3. 17:07

이번에는 제이쿼리 객체의 index 를 얻어올 수 있는 index() 함수에 대해 공부해보자.

사용법은 지극히 간단하므로 바로 밑의 예제를 통해 사용법을 보도록 하자.

    
    
  1. 라면
    2. 
    
  2. 피자
    3. 
    
  3. 치킨
    4. 



    
    
  1. 라면
    2. 
    
  2. 감자라면
    3. 
    
  3. 피자라면
    4. 
    
  4. 치킨라면
    5. 
    
  5. 피자
    6. 
    
  6. 피자헛
    7. 
    
  7. 도미노피자
    8. 
    
  8. 미스터피자
    9. 
    
  9. 치킨
    10. 
    
  10. BHC뿌링클
    11. 
    
  11. BHC맛초킹
    12. 
    
  12. 처갓집
    13. 
    
  13. 교촌치킨
    14. 
    
  14. 시장치킨
    15. 



$(function() {
	var index = $("li").index($("li:contains('치킨')"));
    alert(index);
});

위와 같은 코드가 있을 때 index 는 몇 번이 나올까? 

아마 모든 프로그래밍 언어에서 동일하거나 비슷할 거라고 생각이 되는데 배열이 아닌 이상 거의 정답은 2 가 나온다.


그렇다면 subList 의 치킨을 선택하고 싶다면 어떻게 해야 할까?

아마 보통은 다음과 같은 코드를 작성하게 될 것이다.

$(function() {
	// 모든 li 를 선택자로 하고 있기 때문에 mainList, subList 를 통틀어 index 를 리턴한다.
	// 모든 li 중 인덱스를 선택하고자 할 경우 사용한다.
	var index = $("li").index($("#subList > li:contains('치킨')"));
    alert(index);

    // 반대로 subList 내에서의 index 만을 얻어오고 싶은 경우도 있을 것이다.    
    // 그래서 subList 만을 바라보도록 id 값을 추가하였다.
    index = $("ol#subList > li").index($("#subList > li:contains('치킨')"));
    alert(index);
});

첫 번째 코드의 경우 6 이 나올 것이고 두 번째 코드의 결과는 3 이 리턴되어 올 것이다.


첫 번째 코드는 화면에 존재하는 모든 li 중에서 subList 의 li 중 치킨이 포함되어 있는 객체의 index 를 리턴했기 때문이고

두 번째 코드에서는 ol#subList 를 추가했지만 contains 함수는 파라미터로 넘긴 값이 포함되어 있는 객체를 넘기기 때문에 

우리가 원하는 9. 치킨이 아닌 치킨이라는 값이 포함된 4. 치킨라면의 index 를 먼저 리턴했기 때문이다.


그렇다면 subList 에 포함된 9. 치킨을 넘겨 받고 싶다면 어떻게 해야 할까?




저작자표시 비영리 변경금지