jQuery 클래스 선택기가 실용적으로 작동합니까?

Question

현재 진행중인 페이지와 방문한 페이지를 보여주는 일종의 진행률 표시 줄/탐색 요소를 만들고 있습니다. 이미 방문한 페이지의 색상을 변경하는 기능이 있지만 현재의 것보다 실제로 "더 멀리"있습니다 (예 : 처음 16 페이지를 읽었을 때, 뒤로 8로 돌아갈 때, 9 페이지에서 16 페이지까지를 표시 함). 다른 색상).

건너 뛰지 않고 앞뒤로 탐색하면 구현이 정상적으로 작동합니다. 문제는 페이지로 건너 뛸 때 시작됩니다. 거기에서 뒤로 탐색 할 때 추가 클래스 visited_page_gt_current가 필요한 경우에도 적용되지 않습니다. 한 번에 하나씩 충분히 뒤로 이동할 때 이전에 색상을 변경하지 않은 페이지가 올바른 색상 (한 번에 여러 페이지)으로 바뀝니다.

클래스를 변경하는 코드 : 얻기 위해 다른 방법을 사용하여

• : 나는 시도 http://jsfiddle.net/eQY3h/30/

  것들 :

  // 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했다 div의 색을 바꿀 필요가 있습니다 : 조각을 사용하려면 : gt() - selector, ID를 가져 와서 first()를 사용하십시오 & : not ('. visited_page') to g 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");