zoukankan      html  css  js  c++  java
  • jQuery中.parent和.parents的区别

    .parent(selector) 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选)。

    .parents(selector) 获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选)。

    如果给定一个表示 DOM 元素集合的 jQuery 对象,

    .parents() 方法允许我们在 DOM 树中搜索这些元素的祖先元素,并用从最近的父元素向上的顺序排列的匹配元素构造一个新的 jQuery 对象。

    元素是按照从最近的父元素向外的顺序被返回的。.parents() 和 .parent() 方法类似,不同的是后者沿 DOM 树向上遍历单一层级。

    这两个方法都可以接受可选的选择器表达式,与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器,则将通过检测元素是否匹配该选择器对元素进行筛选。

    <ul class="level-1">
     <li class="item-i">I</li>
     <li 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>
    

    如果我们从项目 A 开始,则可找到其祖先元素

    $('li.item-a').parents().css('background-color', 'red');
    

     此次调用的结果是,level-2 列表、项目 II 以及 level-1 列表等元素(沿 DOM 树一路向上直到 <html>)设置红色背景。

    由于我们未应用选择器表达式,父元素很自然地成为了对象的一部分。如果已应用选择器,则会在包含元素之前,检测元素是否匹配选择器。

    由于我们未应用选择器表达式,所有祖先元素都是返回的 jQuery 对象的组成部分。如果已应用选择器,则只会包含其中的匹配项目。

    如果我们从项目 A 开始,则可找到其父元素:

    $('li.item-a').parent().css('background-color', 'red');
    

    此次调用的结果是,为 level-2 列表设置红色背景。由于我们未应用选择器表达式,

    父元素很自然地成为了对象的一部分。如果已应用选择器,则会在包含元素之前,检测元素是否匹配选择器。 

    在看一个实例:

    <body>body
        <div id="one">one
            <div id="two">hello</div>
            <div id="three">three
                <p>p
                   <a href="#">tonsh</a>
               </p>
            </div>
         </div>
    </body>
    

     思考:

    $("a").parent()
    $("a").parents()
    $("a").parents("div:eq(0)")
    var id=$("a").parents("div:eq(1)").children("div:eq(0)").html();
    

     实例:

    <div id='div1'>
     <div id='div2'><p></p></div>
     <div id='div3' class='a'><p></p></div>
     <div id='div4'><p></p></div>
    </div>
    
    $('p').parent()
    $('p').parent('.a')
    $('p').parent().parent()
    $('p').parents()
    $('p').parents('.a')
    

     下面看一下以前项目中使用的例子

    //删除选中日志
    $(".delcheckbox").click(function(){
        var str='';
        $(".tab input[name=checkbox]:checked").each(function(){
            str+=$(this).val()+',';
        });
        str=str.substring(0,str.length-1);
        if(chk_Batch_PKEY(str)){
            art.dialog.confirm('你确认删除选中的日志吗?',function(){
                $.post("myRun/managerlog_del.php",{id:str},function(tips){
                    if(tips=='ok'){
                        art.dialog.through({title:'信息',icon:'face-smile',content:'删除成功',ok:function(){art.dialog.close();location.reload();}});
                    }else{
                        art.dialog.tips('删除失败');
                    }
                });
                return true;
            });
        }else{
            art.dialog.through({title:'信息',icon:'face-sad',content:'请选择删除的日志',ok:function(){art.dialog.close();}});
        }
    }).addClass("pointer");
    
    //del event
    $(".del").bind("click",function(event){
        var _tmpQuery=$(this);
        var id=$("input[name='id']",$(this).parents("form:first")).attr("value");
        art.dialog.confirm('你确认删除该日志吗?',function(){
            $.post("myRun/managerlog_del.php",{id:id},function(tips){
                if(tips=='ok'){
                    art.dialog.tips('成功删除');
                    _tmpQuery.parents('tr:first').hide();
                }else{
                    art.dialog.tips(tips,5);
                }
            });
            return true;
        });
    });
    

     涉及到的知识点:

    var id=$("input[name='id']",$(this).parents("form:first")).attr("value");

    parentsUntil() 方法

    定义:parentsUntil() 获得当前匹配元素集合中每个元素的祖先元素,直到(但不包括)被选择器、DOM 节点或 jQuery 对象匹配的元素。

    其实,parentsUntil()方法,以及nextUntil()方法、prevUntil()方法,原理一样。唯一不同的是nextUntil()是往下,prevUntil()是往上(同辈元素),

    parentsUntil()也是往上(找祖先元素)

     

  • 相关阅读:
    MySQL中redo日志
    MySQL中事务的分类
    MySQL中事务的概述ACID了解
    MySQL中UNSIGNED和ZEROFILL的介绍
    MySQL中死锁
    谈谈当前火热的“车联网”
    线性代数回顾:矩阵运算
    Spark作业调度阶段分析
    Spark——共享变量
    Spark编译与打包
  • 原文地址:https://www.cnblogs.com/sunliyuan/p/5988340.html
Copyright © 2011-2022 走看看