jQuery选择器：下一个同级元素内部的元素

Question

有人能告诉我如何从'class'为'active_page'的'li'中选择'a'吗？ 我尝试了以下代码，但它并没有起作用：

if($('.active_page').next('.page_link').length==true){
    go_to_page(new_page);
}


<ul>
    <li>
        <a class="previous_link" href="javascript:go_to_previous();">Prev</a>
    </li>
    <li>
        <a class="page_link active_page" href="javascript:go_to_page(0)" longdesc="0">1</a>
    </li>
    <li>
        <a class="page_link" href="javascript:go_to_page(1)" longdesc="1">2</a>
    </li>
    <li>
        <a class="page_link" href="javascript:go_to_page(2)" longdesc="2">3</a>
    </li>
    <li>
        <a class="next_link" href="javascript:go_to_next();">Next</a>
    </li>
</ul>

谢谢

- Andy Chuo

---

有谁能告诉我如何从类“active_page”中选择“li”内的“a”？但链接具有该类，因此您只需使用选择器 $（"a.active_page"）。 - Reinstate Monica Cellio

Answer 1

由于这是兄弟节点的 <li>，所以您需要上升一个级别：

if ($(".active_page").parent().next().children('.page_link').length) {

}

如果这对你来说有点冗长，你可以使用索引：

if ($(".page_link").eq($(".active_page").index("li .page_link") + 1)).length) {

}

为了证明这两个都有效： http://jsfiddle.net/ExplosionPIlls/t5NDX/

- Explosion Pills

---

如果这对你来说有点啰嗦...那么就用这个更长、不太易读的吧。哈哈，还是点个赞。 - nbrooks

@nbrooks 是的，但少了一个方法调用。 - Explosion Pills

是的，但 parent 和 next 是简单的 O(1) 操作。children 也只是访问当前 DOM 元素的属性。但是使用 eq 和 index 都需要完整的 DOM 遍历，并构建完整的元素集合，而你最终只需要一个元素。 - nbrooks

我认为我没有理解 OP 的问题。为什么答案不是像 Archer 在评论中建议的那样简单地使用 $("a.active_page") 呢？ - Adam

Answer 2

next 查找兄弟节点，但是 a 元素没有兄弟节点。它的父元素 li 有：

if($('.active_page').parent().next().find('.page_link').length){
    go_to_page(new_page);
}

此外，length是一个数字，不要与true进行比较。如果您想知道length是否不为0，上述方法可行。

- T.J. Crowder

---

难道不应该是 .next().children('.page_link') 或者 .next().find('.page_link') 吗？因为 <li> 元素是从 .next() 中选择的，所以类筛选器会失败……对吧？ - Explosion Pills

@ExplosionPills：谢谢，我不知怎么错过了那个。已经修复了。 - T.J. Crowder

Answer 3

不确定你想做什么，但是

$('.active_page');

它本身应该给你<a>元素

- bipen