zoukankan      html  css  js  c++  java
  • jQuery .closest()

    .closest()

    .closest( selector )Returns: jQuery

    Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

    Given a jQuery object that represents a set of DOM elements, the .closest() method searches through these elements and their ancestors in the DOM tree and constructs a new jQuery object from the matching elements.

    The .parents() and .closest() methods are similar in that they both traverse up the DOM tree.

    The differences between the two, though subtle, are significant:

    .closest()

    Begins with the current element

    Travels up the DOM tree until it finds a match for the supplied selector

    The returned jQuery object contains zero or one element for each element in the original set, in document order

    .parents()

    Begins with the parent element

    Travels up the DOM tree to the document's root element, adding each ancestor element to a temporary collection; it then filters that collection based on a selector if one is supplied

    The returned jQuery object contains zero or more elements for each element in the original set, in reverse document order


    <
    ul id="one" class="level-1"> <li class="item-i">I</li> <li id="ii" class="item-ii">II <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> </li> <li class="item-iii">III</li> </ul>

    Suppose we perform a search for <ul> elements starting at item A:

    $( "li.item-a" )
      .closest( "ul" )
      .css( "background-color", "red" );

    This will change the color of the level-2 <ul>, since it is the first encountered when traveling up the DOM tree.

    Suppose we search for an <li> element instead:

    $( "li.item-a" )
      .closest( "li" )
      .css( "background-color", "red" );

    This will change the color of list item A. The .closest() method begins its search with the element itself before progressing up the DOM tree, and stops when item A matches the selector.

    We can pass in a DOM element as the context within which to search for the closest element.

    var listItemII = document.getElementById( "ii" );
    $( "li.item-a" )
      .closest( "ul", listItemII )
      .css( "background-color", "red" );
    $( "li.item-a" )
      .closest( "#one", listItemII )
      .css( "background-color", "green" );

    This will change the color of the level-2 <ul>, because it is both the first <ul> ancestor of list item A and a descendant of list item II. It will not change the color of the level-1 <ul>, however, because it is not a descendant of list item II.

  • 相关阅读:
    ubuntu 11.10(32位系统)下编译android源码
    12 个基于 Rails 框架开发的 CMS 系统
    36 个 CSS 框架推荐
    再来 10 个新鲜的 HTML5 教程
    汇编程序开发环境搭配(转)
    推荐:介绍一个UndoFramework
    细数 Windows 平台上的 NoSQL 数据库
    使用ShareKit一键分享到Facebook,Twitter等平台
    25个jQuery的编程小抄
    10款iOS高效开发必备的ObjectiveC类库
  • 原文地址:https://www.cnblogs.com/chucklu/p/11102736.html
Copyright © 2011-2022 走看看