zoukankan      html  css  js  c++  java
  • JQ 遍历--(祖先,后代,同胞,过滤)

    祖先

    
        <style>
        .one,.one *{ 
            display: block;
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 5px;
        }
        </style>
        <div class="one">曾祖先元素
            <div class="tow">祖先元素
                <p class="three">父元素
                    <span class="four">span</span>
                </p>
            </div>
        </div>
    
    
    

    parent() 获取上一级元素

    
        $("span").parent().css({"color":"red","border":"2px solid red"});
    
    
    


    parents() 获取所有父级元素

    
        $("span").parents().css({"color":"red","border":"2px solid red"});
    
        $("span").parents(' '); // 可过滤
    
    
    


    parentsUntil() 获取介于两个给定元素之间的所有祖先元素

    
        $("span").parentsUntil('.one').css({"color":"red","border":"2px solid red"});
    
    
    


    后代

    
        <style>
        .one,.one *{    
            display: block;
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 5px;
        }
        .one{margin: 20px;}
        </style>
        <div class="one">
            <div class="two">tow
                <span class="four">span</span>
            </div>
            <div class="three">three
                <span class="five">span</span>
            </div>
        </div>
    
    
    

    children() 获取下一级所有子元素

    
        $(".one").children().css({"color":"red","border":"2px solid red"});
    
        $(".one").children(' '); // 可过滤
    
    
    


    find() 获取指定的所有子元素

        
        $(".one").find('span').css({"color":"red","border":"2px solid red"});
    
        $(".one").find('*');  // 获取所有子元素
    
    
    



    同胞

    
        <style>
        .all,.all *{    
            display: block;
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 5px;
        }
        .all{margin: 20px;}
        </style>
        <div class="all">
            <div>div</div>
            <p>p</p>
            <h2>h2</h2>
            <div>div</div>
            <span>span</span>
        </div>
    
    
    

    siblings() 获取所有兄弟元素

    
        $("h2").siblings().css({"color":"red","border":"2px solid red"});
    
        $("h2").siblings(' '); // 可过滤
    
    
    


    next() 获取下一个兄弟元素

    
        $("h2").next().css({"color":"red","border":"2px solid red"});
    
    
    



    nextAll() 获取后面的所有兄弟元素

    
        $("h2").nextAll().css({"color":"red","border":"2px solid red"});
    
    
    



    nextUntil() 获取介于两个给定参数之间的所有跟随的兄弟元素

    
        $("p").nextUntil('span').css({"color":"red","border":"2px solid red"});
    
    
    



    prev() prevAll() & prevUntil() 和 next() 相反,获取的是前面的兄弟元素


    过滤

    first() 获取首个元素
    last() 获取最后一个元素
    eq() 获取指定索引号的元素 索引从0开始
    filter() 匹配指定的class id 标签...
    not() 与filter()相反

  • 相关阅读:
    @RequestParam注解使用:Name for argument type [java.lang.String] not available, and parameter name information not found in class file either.
    cglib动态代理导致注解丢失问题及如何修改注解允许被继承
    springboot Autowired BeanNotOfRequiredTypeException
    git根据用户过滤提交记录
    不同包下,相同数据结构的两个类进行转换
    How to use Jackson to deserialise an array of objects
    jooq实践
    java如何寻找main函数对应的类
    Python--matplotlib
    Python 和 Scikit-Learn
  • 原文地址:https://www.cnblogs.com/xiaobaiv/p/9440776.html
Copyright © 2011-2022 走看看