$("prev ~ siblings") 一般兄弟选择器

来源:2-6 练习题

alwaysherewithme

2017-03-21 11:23

$("prev ~ siblings") 一般兄弟选择器:匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素,并匹配过滤“siblings”选择器。

这个选择器怎么理解,如何使用啊?

写回答 关注

3回答

  • qq_Xxxxxxxxxxx_0
    2017-08-01 11:14:27

    因为n6没有同辈的span兄弟,所以继续找n7之后的同辈兄弟是n8 n9。

    其实jQuery对象中应该包含三个DOM对象吧?n3,n6, n7 按照我的理解。

  • alwaysherewithme
    2017-03-21 14:09:21

    http://img.mukewang.com/58d0c2fb0001d20206350122.jpg

    为什么选择的是id=n4, n8, n9的元素?“同一个元素只计入一次”又怎么理解啊?

  • 慕运维6900266
    2017-03-21 12:40:41

    jQuery的prev ~ siblings选择器用于匹配prev元素之后的所有同辈的siblings元素,将其封装为jQuery对象并返回。注意是'同辈'。

    注意:选择器siblings的查找范围必须是"prev元素"之后的元素,并且是同辈元素(即与"prev元素"有同一个的父元素)。

    // 这里的prev表示具体的选择器
    // 这里的siblings表示具体的选择器
    jQuery( "prev ~ siblings" )

    参数


    prev    一个有效的选择器。    

    siblings    一个有效的选择器。

    示例&说明

    以下面这段HTML代码为例:

    <div id="n1">
        <p id="n2" class="test">
            <span id="n3" class="a">Hello</span>
            <span id="n4">Hello</span>
        </p>
        <p id="n5" class="detail">
            <span id="n6" class="b codeplayer">World
                <span id="n7" class="a">http://365mini.com</span>
                <span id="n8"></span>
                <span id="n9"></span>
            </span>
        </p>
    </div>

    现在,我们想要查找p标签之后的同辈p标签,则可以编写如下jQuery代码:

    // 选择了id为n5的一个元素
    $("p ~ p");

    接着,我们查找位于id为n8的span标签之后的同辈span标签,则可以编写如下jQuery代码:

    // 选择了id为n9的一个元素
    // n7虽然也是n8的同辈元素,但不在n8之后,而是之前,因此匹配不到
    $("#n8 ~ span");

    查找位于span标签之后的同辈span标签,对应的jQuery代码如下:

    // 选择了id分别为n4、n8、n9的三个元素
    // n9属于n7的~siblings,也是n8的~siblings,同一个元素只计入一次
    $("span ~ span");


       


    always...

    为什么选择的是id=n4, n8, n9的元素?“同一个元素只计入一次”又怎么理解啊?

    2017-03-21 14:10:38

    共 1 条回复 >

jQuery基础 (一)—样式篇

jQuery初入开启样式修炼,体验万能的jQuery样式集搭建网站布局

217509 学习 · 1218 问题

查看课程

相似问题