• jquery学习手记(8)遍历


    层次的级别有:parent/children/sibling。

    父节点

    父节点遍历方法有:$.fn.parent(), $.fn.parents(), $.fn.parentsUntil(), and $.fn.closest().示例如下:

    <div class="grandparent">
        <div class="parent">
            <div class="child">
                <span class="subchild"></span>
            </div>
        </div>
        <div class="surrogateParent1"></div>
        <div class="surrogateParent2"></div>
    </div>
    // Selecting an element's direct parent
    // returns [ div.child ]
    $("span.subchild").parent();
    // Selecting all the parents of an element that match a given selector
    // returns [ div.parent ]
    $("span.subchild").parents("div.parent");
    // returns [ div.child, div.parent, div.grandparent ]
    $("span.subchild").parents();
    // Selecting all the parents of an element up to, but *not including* the selector
    // returns [ div.child, div.parent ]
    $("span.subchild").parentsUntil("div.grandparent");
    // Selecting the closest parent, note that only one parent will be selected
    // and that the initial element itself is included in the search
    // returns [ div.child ]
    $("span.subchild").closest("div");
    // returns [ div.child ] as the selector is also included in the search
    $("div.child").closest("div");

    子节点

    子节点的遍历方法有:$.fn.children() and $.fn.find()

    $.fn.children()只找直接子节点,$.fn.find()迭代遍历所有的子节点。示例如下:

    // Selecting an element's direct children
    // returns [ div.parent, div.surrogateParent1, div.surrogateParent2 ]
    $("div.grandparent").children("div");
    // Finding all elements within a selection that match the selector
    // returns [ div.child, div.parent, div.surrogateParent1, div.surrogateParent2 ]
    $("div.grandparent").find("div"); 

    兄弟节点

    遍历兄弟节点的基本方法有:$.fn.prev();$.fn.next();$.fn.siblings();$.fn.nextAll();.fn.nextUntil(), $.fn.prevAll() and $.fn.prevUntil().

    示例如下:

    // Selecting a next sibling of the selectors
    // returns [ div.surrogateParent1 ]
    $("div.parent").next();
    // Selecting a prev sibling of the selectors
    // returns [] as No sibling exists before div.parent
    $("div.parent").prev();
    // Selecting all the next siblings of the selector
    // returns [ div.surrogateParent1, div.surrogateParent2 ]
    $("div.parent").nextAll();
    // returns [ div.surrogateParent1 ]
    $("div.parent").nextAll().first();
    // returns [ div.surrogateParent2 ]
    $("div.parent").nextAll().last();
    // Selecting all the previous siblings of the selector
    // returns [ div.surrogateParent1, div.parent ]
    $("div.surrogateParent2").prevAll();
    // returns [ div.surrogateParent1 ]
    $("div.surrogateParent2").prevAll().first();
    // returns [ div.parent ]
    $("div.surrogateParent2").prevAll().last();

    $.fn.siblings()选择所有的兄弟节点:

    // Selecting an element's siblings in both directions that matches the given selector
    // returns [ div.surrogateParent1, div.surrogateParent2 ]
    $("div.parent").siblings();
    // returns [ div.parent, div.surrogateParent2 ]
    $("div.surrogateParent1").siblings();
  • 相关阅读:
    2011级csdnjava张侃—Spring加载配置web
    基于thinkphp实现根据用户ip判断地理位置并提供对应天气信息的应用
    ip地址库 与浏览器的关系
    根据IP定位用户所在城市信息
    Linux利用OneinStack搭建环境
    Laravel根据Ip获取国家,城市信息
    艾伟:一次挂死(hang)的处理过程及经验 狼人:
    艾伟:正则表达式30分钟入门教程 狼人:
    艾伟:C# Design Patterns (1) Factory Method 狼人:
    艾伟:打通.NET 3.5与ExtJS数据交互的任督二脉 狼人:
  • 原文地址:https://www.cnblogs.com/davidwang456/p/3029720.html
Copyright © 2020-2023  润新知