zoukankan      html  css  js  c++  java
  • [ jquery 过滤器 parentsUntil([expr|element][,filter]) ] 此方法用于在选择器的基础之上搜索查找当前元素的所有的父辈元素,直到遇到与表达式和限定条件相匹配的那个元素为止

    查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止

    如果提供的jQuery代表了一组DOM元素,.parentsUntil()方法也能让我们找遍所有元素的祖先元素,直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个返回的jQuery对象里包含了下面所有找到的父辈元素,但不包括那个选择器匹配到的元素

      [expr][,filter]

        expr: 用于筛选祖先元素的表达式

        filter: 一个字符串,其中包含一个选择表达式匹配元素

      [element][,filter]

        element:用于筛选祖先元素的DOM元素

        filter: 一个字符串,其中包含一个选择表达式匹配元素

    实例:

    <html lang='zh-cn'>
    <head>
    <title>Insert you title</title>
    <meta http-equiv='description' content='this is my page'>
    <meta http-equiv='keywords' content='keyword1,keyword2,keyword3'>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>
    <style type="text/css">
        *{margin:0;padding:0;}
        html{font:400 15px/1.2em 'Courier New';color:#666;750px;margin:25px auto;}
        div > p{white-space: pre-wrap;margin:15px 0;}
        div >*{text-indent:8px;}
        .hover{color:#FF96EC;}
    </style>
    <script type='text/javascript'>
        $(function(){
           /*
                找到 "img.pic" 到 '.list' 之间的父元素,是不包含".list"元素节点,如果不指定参数,就是一直找到根节点(html)  
           */
         // $('img.pic').parentsUntil('.list').addClass('hover');
         /*
              第一个参数可以是DOM元素,方法里面还可以传递第二个参数,可以实现限制范围的作用
         */
          var list = document.getElementsByClassName('list');
         $('img.pic').parentsUntil(list,'li').addClass('hover');
        });
    </script>
    </head>
    <body>
        <div id='demo'>
            <div class='noClassDemo'>
                <ul class='list'>
                    <li><a href='#'><img src='#'></a></li>
                    <li><a href='#'><img src='#'></a></li>
                    <li><a href='#'><img src='#'></a></li>
                    <li><a href='#'><img src='#'></a></li>
                    <li><a href='#'><img src='#'></a></li>
                    <li><a href='#'><img src='#'></a></li>
                    <li><a href='#'><img src='#'></a></li>
                    <li><a href='#'><img src='#' class='pic'></a></li>
                    <li><a href='#'><img src='#'></a></li>
                </ul>
                <ul class='list'>
                    <li><a href='#'><img src='#'></a></li>
                    <li><a href='#'><img src='#'></a></li>
                    <li><a href='#'><img src='#'></a></li>
                    <li><a href='#'><img src='#'></a></li>
                    <li><a href='#' class='map'><img src='#'></a></li>
                    <li><a href='#' class='sub'><img src='#'></a></li>
                    <li><a href='#'><img src='#'></a></li>
                    <li><a href='#' class='sup'><img src='#' class='pic'></a></li>
                    <li><a href='#'><img src='#'></a></li>
                </ul>
            </div>
        </div>
    </body>
    </html>
  • 相关阅读:
    eval()函数的使用
    Ajax的GET,POST方法传输数据和接收返回数据
    使用目录
    安装目录
    c 文件输入和输出
    【C++王桂林】
    【C++】虚函数表vtable理解
    【C++】内存管理内幕阅读笔记
    git提交中的索引错误问题
    pydicom编辑、删除DICOM文件中病人相关信息
  • 原文地址:https://www.cnblogs.com/mysearchblog/p/5617407.html
Copyright © 2011-2022 走看看