jQuery中的关系查找方法

jQuery中提供了多种关系查找方法，可以帮助我们选取符合特定关系的元素，包括：

• parent() 查询当前元素的直接父元素
• parents() 查询当前元素的所有祖先元素
• parentsUntil() 查询当前元素与指定祖先元素之间的所有元素
• children() 查询当前元素的所有直接子元素
• find() 查询当前元素所有符合选择器的后代元素
• siblings() 查询当前元素的所有兄弟元素
• next() 查询当前元素下一个兄弟元素
• nextAll() 查询当前元素后面的所有兄弟元素
• nextUntil() 查询当前元素与指定兄弟元素之间的所有元素
• prev() 查询当前元素前一个兄弟元素
• prevAll() 查询当前元素前面的所有兄弟元素
• prevUntil() 查询当前元素与指定兄弟元素之间的所有元素

下面结合两条示例说明关系查找方法的使用：

示例1

HTML代码：

<div class="wrapper">
  <ul>
    <li>菜单1</li>
    <li>菜单2</li>
    <li>菜单3</li>
  </ul>
</div>

JavaScript代码：

var $li = $('li');

var $parent = $li.parent();
console.log($parent); // 输出： <ul>...</ul>

var $parents = $li.parents();
console.log($parents); // 输出： <ul>...</ul><div class="wrapper">...</div>

var $children = $li.children();
console.log($children); // 输出： <li>菜单1</li><li>菜单2</li><li>菜单3</li>

在这个示例中，我们通过jQuery选取了三个<li>元素，然后使用了parent()、parents()和children()三个方法分别查询它们的父元素、所有祖先元素和所有子元素，并输出结果。

示例2

HTML代码：

<div class="wrapper">
  <ul>
    <li>菜单1</li>
    <li>菜单2</li>
    <li class="active">菜单3</li>
  </ul>
  <div>
    <h3>说明</h3>
    <p>这是一个菜单列表，第三个菜单被选中。</p>
  </div>
</div>

JavaScript代码：

var $li = $('li.active');

var $siblings = $li.siblings();
console.log($siblings); // 输出： <li>菜单1</li><li>菜单2</li>

var $next = $li.next();
console.log($next); // 输出： <div>...</div>

var $nextAll = $li.nextAll();
console.log($nextAll); // 输出： <div>...</div>

var $prev = $li.prev();
console.log($prev); // 输出： undefined

var $prevAll = $li.prevAll();
console.log($prevAll); // 输出： <li>菜单2</li><li>菜单1</li>

在这个示例中，我们首先选取了一个带有active类的<li>元素，然后使用siblings()、next()、nextAll()、prev()和prevAll()这五个方法查询与它保持兄弟关系的元素，分别输出了结果。需要注意的是，在这个示例中，由于当前元素没有前一个兄弟元素，所以prev()方法返回了undefined。