17.09 JQuery父元素 && 同级元素

先来一段例子代码，便于以下解说

<div>
    <ul class="the_ul">
        <li></li>
        <li></li>
        <li></li>
        <li class="the_li">
            <a href="#" class="the_test"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#" class="the_test2"></a>
        </li>
        <li></li>
        <li></li>
    </ul>
</div>

一.获取父级元素，.parent(selector) && .parents(selector) && parentsUntil()；选择器可选

1.获取当前匹配元素的父元素，.parent(selector)，例如

$('.the_test').parent()    //取得的是 a标签 的父元素，第4个 li对象

还可以往上增加的，如

$('.the_test').parent().parent()    //取得的是 ul对象

那么理所当然

$('.the_test').parent().parent().parent()    //取得的便是 div对象

当然不建议这样用，太长了，不好看还没效率？ 0.0


2.获取当前匹配元素的每一个祖先元素，.parents(selector)，例如

$('.the_test').parents()    //取得ul、div、body、html对象

单单多加了一个“s”，以上取得的便是 a标签 的每一个祖先元素，包括：ul、div、body、html，直到文档根部；由此可见，我们在用这个选择器的时候，很多时候都得加上刷选器，如：

$('.the_test').parents('li')    //第4个 li对象
$('.the_test').parents('div')    //第4个  div对象

3.parentsUntil()，获得当前匹配元素的每一个祖先元素集合，直到刷新器匹配的对象为止（不包括选择器匹配的对象），如

$('.the_test').parentsUntil('ul')    //只取得了第4个 li对象 呢

注意：刷选器是必选的，而且parentsUntil 中“U”是大写，亲测小写无效，驼峰命名（以下同）

---

二.获取同级元素，.next() && .nextAll() && .andSelf() && .prev() && .prevAll()；也就5个，而且都有相似性

1.获取当前匹配元素的下一个同级元素，.next()，如

$('.the_test').next()    //取得第2个 a对象

当然也是可以连缀下去的！

$('.the_test').next().next()    //取得第3个 a对象

2.获取当前匹配元素以下的所有同级元素，.nextAll()，如

$('.the_test').nextAll()    //取得第2、3、4个 a对象

这个加上刷选器就更加好用准确了，如

$('.the_test').nextAll('.the_test2')    //取得第4个 a对象

3.获取当前匹配元素以下的所有同级元素，包括当前匹配元素，如

$('.the_test').andSelf()      //取得所有 a对象
$('.the_test').andSelf('.the_test2')      //取得第1、4个 a对象

4.剩下 .prev() && .prevAll() 就不说了，和 .next() && .nextAll() 类似，只不过next是往下，prev是往上。（貌似没有往上包括自己呢？算了~往下包括自己都不一定用得上）

---

三.获取子元素

1.> ，这个必须举例来说明了

$('.the_ul > li')    //取得ul下的所有 li对象

必须层层递进，越级写是不起作用的

$('.the_ul > a')    //false，获取不到任何对象
$('.the_ul > li > a')    //true，获得所有的 a标签对象

2. .children() ,获得匹配元素的子元素（只是儿子，孙子之类的滚一边去）

$('.the_ul').children()    //取得所有的 li对象
$('.the_li').children('.the_test')    //取得第1个 a标签对象

3. .find() ，获得当前匹配元素的后代元素，刷选器是必选的，这个好用，隔几代都可以找到（效率不高？）

$('div').find('.the_test')    //找div的后代，取得第1个 a标签对象

---

至此全部讲述完毕，多个选择器配合着、连缀着用，总能找到你想要的元素对象了吧？