jQuery 순회 가장 가까운() 메서드

선택한 요소를 중심으로 find 및 children 메소드를 사용하여 내부를 검색할 수 있습니다. 위쪽으로 검색하는 경우, 즉 현재 요소의 상위 요소와 상위 요소를 찾으려면 jQuery에서 Nearest() 메서드를 제공합니다. 이 메서드는 상위 요소와 유사하지만 매우 자주 사용되는 메서드입니다. () 메소드는 일치된 요소의 선택기 문자열을 허용합니다

요소 자체에서 시작하여 DOM 트리의 상위 요소와 일치하고 일치하는 첫 번째 조상 요소를 반환합니다

예: div 요소에서 위쪽으로 검색 모든 li 요소에 대해 다음과 같이 표현할 수 있습니다

$("div").closet("li')

참고: jQuery는 컬렉션 개체이므로 가장 가까운 것은 컬렉션의 각 요소와 일치하는 조상 요소입니다.

closest() 메서드에 jQuery 컬렉션 또는 요소를 필터링하는 요소가 지정됨

마찬가지로 jQuery는 컬렉션 개체이기 때문에 대상 요소를 찾기 위해 이 컬렉션 개체를 필터링해야 할 수 있으므로 jQuery 개체를 전달하는 것이 허용됩니다

참고: 사용할 때 다음과 같은 경우에는 특별한 주의가 필요합니다. > . 가장 가까운 요소는 현재 요소에서 시작하고 상위 요소는 상위 요소에서 시작합니다.

지정된 대상을 찾으려면 상위 요소가 다음으로 이동합니다. 문서 루트 요소에서 가장 가까운 요소는 위쪽으로 검색하고 일치하는 항목을 찾을 때까지 검색을 중지합니다. 상위 요소는 루트 요소로 이동하여 일치하는 요소를 컬렉션에 추가합니다.

결과는 다릅니다. Nearest는 0 또는 0을 포함하는 jquery 객체를 반환합니다. 하나의 요소, 그리고 부모는 0개 이상의 요소를 포함하는 jquery 객체를 반환합니다.

다음으로 코드 조각을 살펴보겠습니다

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .left {
        width: auto;
        height: 200px;
    }
    
    .left div {
        width: 350px;
        height: 150px;
        padding: 5px;
        margin: 5px;
        float: left;
        background: #bbffaa;
        border: 1px solid #ccc;
    }
    
    span {
        color: blue;
    }
    </style>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head>

<body>
    <h2>closest方法()</h2>
    <div class="left first-div">
    <div class="div">
        <ul class="level-2">
            <li class="item-a">A</li>
            <li class="item-b">B
                <ul class="level-3">
                    <li class="item-1">1</li>
                    <li class="item-2">2</li>
                    <li class="item-3">3</li>
                </ul>
            </li>
            <li class="item-c">C</li>
        </ul>
    </div>
    </div>
    <br/>
    <button>点击：closest传递选择器 </button>
    <button>点击：closest传递一个元素对象</button>
    <script type="text/javascript">
    $("button:first").click(function() {
        $('li.item-1').closest('.level-2').css('border', '1px solid red');
    })
    </script>
    <script type="text/javascript">
    $("button:last").click(function() {
        var itemB = $('.item-b')
        $('li.item-1')
            .closest(itemB)
            .css('border', '1px solid blue');
    })
    </script>
</body>

</html>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> .left { width: auto; height: 200px; } .left div { width: 350px; height: 150px; padding: 5px; margin: 5px; float: left; background: #bbffaa; border: 1px solid #ccc; } span { color: blue; } </style> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> </head> <body> <h2>closest方法()</h2> <div class="left first-div"> <div class="div"> <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </div> </div> <br/> <button>点击：closest传递选择器 </button> <button>点击：closest传递一个元素对象</button> <script type="text/javascript"> $("button:first").click(function() { $('li.item-1').closest('.level-2').css('border', '1px solid red'); }) </script> <script type="text/javascript"> $("button:last").click(function() { var itemB = $('.item-b') $('li.item-1') .closest(itemB) .css('border', '1px solid blue'); }) </script> </body> </html>

제출하다 코드 재설정

자동운전