jQuery - Selector (예문)

--------------------------------------------------------

    function ProdRemove() {

        var items = $("input:checkbox[name=chkBoxPRODADD]:checked");

        if (items.length == 0) {

            alert("선택한 상품이 없습니다.");

            return false;

        }

        if (confirm("선택한 상품을 삭제하시겠습니까?") == false) {

            return false;

        }

        $(items).each(function () {

            $(this).closest("tr").remove();

        });

        ProdAddCount();

    }

    function ProdAddCount() {

        var trCount = $("table#tablePRODADD tbody tr").length;

        $("#labProdCount").html(trCount);

        if (trCount == 0) {

            $("input:checkbox[name=all_chk]").prop("checked", false);

        }

    }

    function CheckBox_All(obj, cbName) {

        $("input:checkbox[name=" + cbName + "]").each(function () {

            $(this).prop("checked", $(obj).is(":checked"));

        });

    }

    function SeachProdSelectAdd(prodNum, prodName, prodStds, prodUnit, prodMaker) {

        var appendHtml = "<tr> ~~ </tr>"

        //$("#tablePRODADD").append(appendHtml);  // 자식(children) 뒤 요소에 추가

        $("#tablePRODADD").prepend(appendHtml);   // 자식(children) 앞 요소에 추가

    }

    function IsFindProd(prodNum) {

        var reValue = false;

        $("input:checkbox[name=chkBoxPRODADD]").each(function () {

            if ($(this).val() == prodNum) {

                reValue = true;

                return false;

            }

        });

        return reValue;

    }

    function ProdAdd() {

        var items = $("input:checkbox[name=chkBoxPROD]:checked");

        if (items.length == 0) {

            alert("상품을 선택해 주세요.");

            return false;

        }

        var ProdNum = "";

        var ProdName = "";

        var ProdStds = "";

        var ProdUnit = "";

        var ProdMaker = "";

        $(items).each(function () {

            var tdObj = $(this).closest("tr").find('td');

            ProdNum = $(this).val();

            ProdName = $(tdObj).eq(2).html();

            ProdStds = $(tdObj).eq(3).html();

            ProdUnit = $(tdObj).eq(4).html();

            ProdMaker = $(tdObj).eq(5).html();

            if (parent.IsFindProd(ProdNum) == false) {

                parent.SeachProdSelectAdd(ProdNum, ProdName, ProdStds, ProdUnit, ProdMaker);

            }

        });

        parent.ProdAddCount();

    }

    function AreaAddListOrderby() {

        var sortdir = 1;    // asc

        //var sortdir = -1;   // desc

        var rec = $("table#tableList1 tbody tr");

        rec.sort(function (a, b) {

            //var val1 = $(a).children('td').eq(column).text().toUpperCase();

            //var val2 = $(b).children('td').eq(column).text().toUpperCase();

            var val1 = a.getAttribute("data-Orderby").toUpperCase();

            var val2 = b.getAttribute("data-Orderby").toUpperCase();

            return (val1 < val2) ? -sortdir : (val1 > val2) ? sortdir : 0;

        });

        $.each(rec, function (index, row) {

            $('table#tableList1 tbody').append(row);

        });

    }

    function WindowCloseAndRefresh() {

        parent.opener.location.reload();

        window.close();

    }

--------------------------------------------------------

[예제] $(this)는 $(".me") 가정

<div class="grandmom">

        <div class="mom">

                <div class="me">

                        <div class="son">

                                <div class="grandson">

                                </div> //end grandson

                        </div> //end son

                <div> // end me 

                <div class="brother">

                </div> //end brother

                <div class="sister">

                </div> //end brother

        </div> //end mom

</div> //ent grandmom

1. parent()    

- 결과 : mom, grandmom

parent() 함수는 부모'들'을 호출한다. 위 상황에서 $(this).parent() 로 호출하면 mom, grandmom 이 모두 호출된다. grandmom만 선택하고 싶다면 $(this).parent().parent() 로 호출하는 법도 있지만, 보다 세련되게 하려면 index로 호출하는 eq() 함수를 쓰자. $(this).parent().eq(2); 이렇게 하면 2번째 상위의 parent 요소가 선택된다.

2. closest()

- 결과 : mom

closest() 함수는 함수 명처럼 가장 가까운 부모를 선택한다. 

3. siglings() 

- 결과 : brother, sister

형제 요소들'을' 호출한다. 만약 바로 옆에 있는 형제만 선택하고 싶다면 next() 함수를 쓰면 된다. $(this).next("div") 이렇게 선택하면 .brother 가 선택된다.

4. children()

- 결과 : son

직계 자식을 선택한다. son 밑에 grandson이 있지만 grandson 은 선택되지 않는다. grandson까지 선택하고 싶으면 find() 를 사용하자. find는 depth에 상관없이 자손들을 모두 선택한다. (jQuery 선택자에서 자손과 자식은 다른 의미로 사용된다. 자손은 depth 하위의 자식들도 포괄하고, 자식은 직계자식만을 의미한다.)

--------------------------------------------------------

.parent()

 선택한 요소의 부모(parent) 요소를 선택

.parents()

 선택한 요소의 부모(parent) 요소를 모두 선택

.parentsUntil()

 선택한 요소의 조상 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택

.closest()

 선택한 요소를 포함한 조상 요소 중에서 지정한 선택자에 해당하는 요소 중 가장 첫 번째 요소를 선택

--------------------------------------------------------