jQuery 09. 추가적인 메소드

 each 메소드 

배열의 모든 인덱스에 순차적으로 접근하고자 할 때나 객체가 가지고 있는 모든 속성에 순차적으로 접근하고자 할때
사용하는 for in문과 유사하게 수행되는 메소드 

1) $.each(객체|배열, function([매개변수1, 매개변수2]){
          순차적으로 접근할 때마다 실행할 내용;  
    });

2) $(배열).each(function([매개변수1, 매개변수2]){
         순차적으로 접근할 때마다 실행할 내용;
   });

객체일때  첫번째 매개변수에는 순차적으로 접근할 때마다의 객체의 속성명 (키값)이 담김
두번째 매개변수에는 해당 속성값(밸류값)이 담김

배열일때 첫번째 매개변수에는 순차적으로 접근하는 인덱스 수가 담김 
두번째 매개변수에는 해당 인덱스의 값이 담김 

    <button id="btn">학생 조회</button> <br><br>
    <table id="area1" border="1">
        <thead>
            <tr>
                <th>이름</th>
                <th>나이</th>
                <th>주소</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

    <script>
        $("#btn").click(function(){
            //db로 부터 조회했다는 가정하에 (ajax)
            const students = [{name:"홍길동",age:20,address:"서울"},
                              {name:"김말똥",age:30,address:"부산"},
                              {name:"강개순",age:25,address:"광주"}];
            let result = "";
           
            $.each(students, function(index, obj){
                result += "<tr>"
                       +     "<td>"+ obj.name + "</td>"
                       +     "<td>"+ obj.age + "</td>"
                       +     "<td>"+ obj.address + "</td>"
                       + "</tr>";
            })      
            $("#area1>tbody").html(result);            
        })

        
    </script>

이름	나이	주소

 

---

    <div id="area2">
        <span>item-1</span>
        <span>item-2</span>
        <span>item-3</span>
        <span>item-4</span>
        <span>item-5</span>
    </div>

    <script>
        $(function(){
            $.each($("#area2").children(), function(index,el){//el:순차적으로 접근되는 요소객체
    
                //javaScript=> jQuery로 변환 후 jQuery 메소드 사용
                $(el).addClass("highlight-"+index); //--> 제대로 됨

                //this.className = "highlight-"+index; --> 제대로됨
				//$(this).addClass("highlight-"+index); //--> 제대로됨
            })

        })
    </script>

item-1 item-2 item-3 item-4 item-5

---

is 메소드 

$("선택자").is("선택자")

선택된 요소가 내가 전달한 값과 일치하는지 판단해서 논리값 반환 ( 일치하면 true / 일치하지 않으면 false)

<h4 class="test">test1</h4>
    <h4>test2</h4>
    <h4 class="test">test3</h4>
    <h4 class="test">test4</h4>
    <h4>test5</h4>
    <h4 class="test">test6</h4>
    
    <script>
        $(function(){
            //현재 문서상의 모든 h3요소에 순차적으로 접근 
            // 해당 h3요소에 test클래스가 존재한다면 배경색 변경 

            $("h4").each(function(){
                if($(this).is(".test")){
                    $(this).css("backgroundColor","orange");
                }
            })
        })
    </script>

test1

test2

test3

test4

test5

test6