jQuery 类选择器工作不可靠？

Question

我正在制作一种进度条/导航元素，显示您当前所在的页面和您访问过的页面。有一个额外的功能可以改变您已经访问过的页面的颜色，但这实际上比您当前的页面“更远”（例如：您已阅读前 16 页，您导航回至后 8 页，第 9 页到第 16 页显示不同的颜色）。

如果您只是向前和向后导航而不跳过，我的实现工作正常。当您跳到一个页面时，问题就开始了。当您从那里向后导航时，即使应该应用附加类visited_pa​​ge_gt_current 也不会应用。当您一页一页地向后导航时，以前未更改颜色的页面会在某个时间点更改为正确的颜色（一次多个）。

更改类的代码：

 // remove current page and visited_page_gt_current from all the visited ones to be sure
    $(".visited_page").removeClass("current_page visited_page_gt_current");

 // add current page and visited page classes to the current element
    $("#pbar_elem"+i).addClass("current_page visited_page");

 //add visited_page_gt_current to all visited pages that are "further" than the current page
    $(".visited_page").slice(i-1, 15).addClass("visited_page_gt_current");

我做了一个简化的 JSFiddle 来演示这个问题：http://jsfiddle.net/eQY3h/30/

我尝试过的事情：

• 使用不同的方法来获取 div 我需要更改颜色：切片、使用 :gt()-选择器、获取 ID 并使用 first() & :not('.visited_pa​​ge') 来获取第一个未访问页面之后的 .visited_pa​​ges div。

• 以上所有方法都以类似的方式工作，但在跳过后都失败：选择器在跳过后只给出空结果，直到某个点到来，它们再次给出正确的 ID

Answer 1

问题在于.slice 的想法是错误的。它不应该应用于.visited_page，而是应用于所有页面；过滤.visited_page在切片之后。所以这会起作用：

$(".pbar_elem").slice(i - 1)
    .filter(".visited_page").addClass("visited_page_gt_current");

替代的等效版本是这样做：

$("#pbar_holder"+i).nextAll()
    .find(".visited_page").addClass("visited_page_gt_current");