검토하기: jQuery 컬렉션과 반복

jQuery 컬렉션

요소를 찾기 위해 jQuery를 사용할 때, jQuery는 다시 jQuery 컬렉션 객체를 반환합니다:

var $heading = $('h1');

JQuery 컬렉션 객체를 저장하고 있다는 것을 보여주기 위해서 변수 이름을 $기호로 시작하는 것은 관례입니다. 이런 습관은 DOM 노드를 저장하고 있는 변수들과 구분하는 것을 도와줍니다.

만약 jQuery 객체에서 DOM 노드를 검색하고 싶다면, jQuery 객체를 배열처럼 다루어 대괄호를 사용할 수 있습니다.

var heading = $heading[0];

만약 DOM 노드를 jQuery 객체로 변경하고 싶다면, 해당 노드를 jQuery 함수로 전달하면 됩니다.

var $heading = $(heading);

만약 컬렉션에 있는 여러 요소들을 반복하고 싶다면, 일반적인 for 반복문 또는 jQuery의 each()를 사용할 수 있습니다.

    $("p").each(function(index, element) { 
        $(element).text( $(element).text() + "!!"); 
    });

each()함수를 호출할 때, 반드시 해당 함수에 '콜백 함수'를 전달해야합니다. 그러면 jQuery가 컬렉션의 매 요소마다 해당 콜백 함수를 호출하고, 함수에게 현재 인덱스와 요소를 전달할 것입니다.

jQuery는 또한 현재 요소에게 함수의 컨텍스트를 지정할 수 있는데, 이는 this 키워드를 사용해서 해당 요소를 불러올 수 있다는 뜻입니다:

    $("p").each(function() { 
        $(this).text( $(this).text() + "!!"); 
    });

정렬 기준:

포스트가 아직 없습니다.