jQuery 组合选择器

示例

考虑以下DOM结构

<ul class="parentUl">
    <li> Level 1
        <ul class="childUl">
            <li>Level 1-1 <span> Item - 1 </span></li>
            <li>Level 1-1 <span> Item - 2 </span></li>
        </ul>
    </li>
    <li> Level 2
        <ul class="childUl">
            <li>Level 2-1 <span> Item - 1 </span></li>
            <li>Level 2-1 <span> Item - 1 </span></li>
        </ul>
    </li>
</ul>

---

后代和子选择器

给定父母<ul>-parentUl找到其后代（<li>），

1. 简单 $('parent child')

   >> $('ul.parentUl li')

   这样可以将指定祖先的所有匹配后代降低到所有级别。

2. > -- $('parent > child')

   >> $('ul.parentUl > li')

   这会找到所有匹配的子级（仅向下一级）。

3. 基于上下文的选择器- $('child','parent')

   >> $('li','ul.parentUl')

   这与上面的1.相同。

4. find() -- $('parent').find('child')

   >> $('ul.parentUl').find('li')

   这与上面的1.相同。

5. children() -- $('parent').find('child')

   >> $('ul.parentUl').children('li')

   与上面的2.相同。

---

其他组合器

组选择器：“，”

选择所有<ul>元素以及所有<li>元素和所有<span>元素：

$('ul, li, span')

倍数选择器：“”（无字符）

选择所有<ul>具有class的元素parentUl：

$('ul.parentUl')

相邻兄弟选择器：“ +”

选择<li>紧接在另一个<li>元素之后的所有元素：

$('li + li')

通用同级选择器：“〜”

选择所有<li>其他<li>元素的兄弟元素：

$('li ~ li')