07.30(each, is)

each

자바스크립트의 for ..in문과 비슷

배열, 객체의 요소를 순차적으로 접근

$.each(object, 콜백함수) ->배열이면 요소 하나씩, 객체면 키 벨류 : 배열/객체

$(배열).each(콜백함수) : 객체 사용불가

객체 : Object.keys(객체).forEach(callbackFunction)

$(function() {
    let arr = ["홍길동","신사임당","이순신"];
    $.each(arr, function(index, elem) {
        console.log(index + " : " + elem);
    });

    //배열을 jquery객체로 변환 후 사용할 것
    $(arr).each((i, e) => {
        console.log(i + " : " + e);
    });

    let obj = {
        name : "홍길동",
        id : "honggd",
        isMarried : true,
        hobby : ['농구', '탁구']
    }
//    $.each(obj, function(key, value) {
//        console.log(key + "=" + value);
//    });

//객체 요소 순회 불가
// $(obj).each(function(key, value) {
//            console.log(key + "=" + value);
//     //    console.log(value.name +", "+value.id+", "+value.isMarried+", "+value.hobby);
//    });

//**순수자바스크립트의 foreach를 통해 객체 열람(자바의 map과 비슷)
//(내가 접근하려는 요소가 제이쿼리의 객체인지 자바스크립트의 객체인지 구별해야함)
console.log(Object.keys(obj));
Object.keys(obj).forEach(k => {
    console.log(k + " = " + obj[k]);
});

});

 

동적으로 a태그 생성하기

<div id="area1" style="height: 100px; background-color: rgb(228, 208, 182);"></div>
<input type="button" value="생성" id="btn1">
<script>
$(function() {
    let linkArr = [
        {name : "네이버", link : "https://www.naver.com"},
        {name : "구글", link : "https://www.goolge.com"},
        {name : "와삼", link : "https://www.w3school.com"},
        {name : "W3C", link : "https://www.w3c.com"},
    ];
    
    $("#btn1").click(function() {
        //존재하는 모든 자식요소 삭제
        $("#area1").empty();

        //동적으로 #area1안에 a태그 4개 생성
        //html, append사용
        // $.each(linkArr, function(key, value) {
        //     console.log(key + " : " + value.name + " : " + value.link);
        //     $("#area1").append(value.name + " : " + value.link + "<br>");
            // $("#area1").append(a + "&nbsp;&nbsp;");
        // });
        $.each(linkArr, (i,e) => {
            let a ="<a href='"+e.link+"'>"+e.name+"</a>";
            // console.log(a);
            // area1.innerHTML = a;
            $("#area1").html($("#area1").html() + "&nbsp;" + a);
        });
    });
});
</script>

 

 

is

문서객체 판별 메소드 : boolean을 리턴

현재객체가 is의 매개인자 선택자하고 일치여부를 판단

<div class="wrapper">
    <h3 class="test">test1</h3>
    <h3>test2</h3>
    <h3 class="test">test3</h3>
    <h3 class="test">test4</h3>
    <h3>test5</h3>
    <h3 class="test">test6</h3>
</div>
<script>
$(function(){
    $(".wrapper h3").each(function(idx, elem) {
        //this가 현재 접근중인 요소
        // console.log(idx, this);
        // console.log(idx, elem);

        //@실습문제 : .test클래스를 찾고,
        // 해당컨텐츠가 짝수로 끝나는 요소만 글자크기를 36px로 변경
        //현재요소가 .test인지 여부 확인
        if($(this).is(".test")){
            // console.log(idx, this, $(this).is(".test"));

            let content = $(this).text();
            let num = content.replace(/test/, '');  //자동형변환
            console.log(num);

            if(num%2 == 0){
                $(this).css("font-size", "36px")
            }
        }
    });
});
</script>

 

 

checkbox에서 is사용하기

<input type="checkbox" name="fruit" id="apple" value="apple">
<label for="apple">사과</label>
<input type="checkbox" name="fruit" id="mango" value="mango">
<label for="mango">망고</label>
<input type="checkbox" name="fruit" id="kiwi" value="kiwi">
<label for="kiwi">키위</label>
<input type="button" value="확인" id="btn2">
<script>
$("#btn2").click(function() {
    $("[name=fruit]").each(function(idx, elem) {
        //1번 is
        let checked = $(elem).is(":checked");  //체크된 상태인지 여부prop이나 is로 확인 가능 
        //2번 prop
        let checked2 = $(elem).prop("checked") 
        console.log(elem, checked, checked2);
    });
});
</script>