JQuery中parent(),parents(),parentsUntil()区别联系以及使用方法教程

巴扎黑
Lepaskan: 2017-06-24 09:28:18
asal
2042 orang telah melayarinya

parent()其实很简单, 就是指定选择器中每个元素的外边的一层。比如$("p"),那么就是结果就是包裹着

的数据 如:

。如果有多个

则结果集为对象集。可以用eq(i),first(),last()定位。如果数据为

  • 怎使用$("p").parent("li")查询的结果为空,因为

    的外层为

    JQuery手册中

    <p><p>Hello</p></p><p class="selected"><p>Hello Again</p></p>
    Salin selepas log masuk
    <pre class="brush:php;toolbar:false">$("p").parent(".selected");
    Salin selepas log masuk
    //结果:
    Salin selepas log masuk
    [ <p class="selected"><p>Hello Again</p></p> ]
    Salin selepas log masuk

    可以理解为

    $("p").parent().find(".selected");
    Salin selepas log masuk

    找直接父亲中类为selected的那一个或者几个。

    所以parent()的实用性并不强。

    parents()就是选择器中每个元素的所有的父亲,如果选择器有多个父亲则返回的是个结果集。结果集的结果是由内层向外层排列的。最外层就是整个html元素了,第一个就是紧包着选择器中每个元素的元素。结果集中并没有重复的元素。

    同理当带参数时,也是在结果集中find制定的元素

    $("p").parents(".selected");
    Salin selepas log masuk
    $("p").parents().find(".selected");
    Salin selepas log masuk

    因此我们想找到选择器的某个父亲,就要先找到他的所有父亲,然后在find这个父亲。

    当我们想找到当前元素的某个父亲的时候,下面的语法就要用到了。

    $(this).parents("li");//$(this).parents().find("li");
    Salin selepas log masuk

    所以parents()的实用性很强。非常常用。

    parentsUntil(expr)。如果说parents()是在整个html元素中找选择器中每个元素的所有父亲,那么parentsUntil()的作用就是限制了查找的范围。这个范围就是 $(expr).html()

    $("p").parents();//包含整个html 元素$("p").parentsUntil("html");//不包含整个html元素
    Salin selepas log masuk

    以上两个表达式的结果集只相差一个元素,就是整个html元素。

    $("p").parents();//包含整个html 元素$("p").parentsUntil();//包含整个html元素
    Salin selepas log masuk

    当parentsUntil()不带参数时,他等同于parents();

    parentsUntil(expr)的结果集中的结果同样是由内层向外层排列的。parentUntil(expr),会从第一个包裹着元素父元素开始向外逐层查找,直到遇到第一个与表达式(expr)相匹配的元素为止。

    $("p").parentsUntil(expr);
    Salin selepas log masuk

    相当于在$(expr)中由内之外的寻找$("p")中每个元素的所有父元素

    为了更加精准的寻找到指定的元素,可以如下的使用。

    $("p").parentsUntil("ul").find("li");
    Salin selepas log masuk

    但以上做法不能找到ul>li,只能找到ul * li。因为paentsUntil()返回结果集中最大的父亲是ul>*而find是在ul>*的后代元素查找不包括ul>*的元素。所以如果用该方法查找ul>li是不可行的

    可以使用以下代码查询全部ul下的li(第一行),最近的ul下的所有li(第二行)

    $("p").parents("ul").find("li");$("p").parents("ul").eq(0).find("li");
    Salin selepas log masuk

    parentsUntil(expr),返回的结果集不包括expr本身,而后面如果使用find()又会在结果集后代元素中查询,所以查询得到的结果不是expr的子元素而是二代和二代以后的子元素。

    鉴于parentsUntil的表现,一般不建议使用。

    parnetsUntil()可用于找到某个模块下的某些元素。

    当我们要具体对结果集中某个元素进行操作是,要记得使用eq(i),first(),last()等函数取值,不然操作的是整个结果集。

    动态查找父节点

    $(this).parent("li");//找到第一个包住$(this)的dom,如这个dom是li则返回他的对象,如果不是则返回空对象$(this).parents("li");//找到所有$(this)的父亲,并在其中找出所有的li的对象,组成结果集。结果集中结果由内之外排列$(this).parents().find("li");//同上。$(this).parents("li").eq(0);//$(this)外第一个包裹他的li对象$(this).parentsUntil("li");//$(this)外到第一个包裹他的li之内的所有的$(this)的父亲$(this).parentsUntil("ul").find("li");//$(this)在ul之前的那个父亲之内(不包括该父亲)找所有的li;如果<ul><li><p><a onclick="f()">中a是this的话,那么相当于$("li").find("li");最后结果之空。$(this).parents("li").sublings();//查找所在的li的所有同辈元素
    Salin selepas log masuk

    与parent()对应的函数是children()

    与parents()对应的函数是find()

    Atas ialah kandungan terperinci JQuery中parent(),parents(),parentsUntil()区别联系以及使用方法教程. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan