제이쿼리로 선택한 node를 map으로 처리하기

조회수 1966회

몇개의 input태그의 값을 체크하는 코드를 작성하고 있습니다. 가급적 코드를 줄이려고 jquery 선택자를 사용하는 중입니다.

$('form[name="an"] .cell input').map(function(eachNode){
    if(!eachNode.value){
        console.log('값이 없음');
    }else{
        console.log('값이 있음');
    }
});

$('form[name="an"] .cell input')을 콘솔에서 입력해보면 length가 3이고 각각 input node를 가리키고 있는 객체가 나오는데 상술된 코드를 사용해보면 input값에 관계없이 '값이 없음'을 한번만 출력하고 끝냅니다.

map 내부가 어떻게 돌아가는지 궁금해서 console.log(eachNode)를 돌려봤는데 0, 1, 2만 나오네요. 제가 map에 대해서 아직 잘못 이해하고 있는걸까요?

1 답변

  • 좋아요

    0

    싫어요
    채택 취소하기

    API 문서 에 따르면 map( callback )에서 callback에 해당하는 함수는 Function( Integer index, Element domElement ) => Object 의 형태여야 합니다.

    즉 질문의 예시에서 eachNode에 사상된 것은 index이며, 만약 dom을 직접 접근하려면 두번재 인자를 사용해야 합니다.

    map함수에서 개별대응되는 항목에 접근하려면 다음 두 가지 방법중 하나를 사용하면 될 것 같습니다.

    $('form[name="an"] .cell input').map(function() {
        var node = $(this);
        if(!$node.val()) {
          console.log('값이 없음');
        } else {
          console.log('값이 있음');
        }
    });
    

    dom element을 직접 사용하기

    $('form[name="an"] .cell input').map(function(index,el) {
        if(!el.value) {
          console.log('값이 없음');
        } else {
          console.log('값이 있음');
        }
    });
    
    • 감사합니다! 역시 레퍼런스는 언제나 옳군요! 영어공부는 더 해야겠지만 ㅠ Snark 2016.7.4 09:36

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)