Скрыть определенный диапазон детей jQuery

Question

Я создаю общий заголовок для связки страниц и передаю переменные, чтобы задать текст заголовка и т. Д. У меня есть меню палитры, и я хочу показывать только соответствующее количество шагов для страницы. Так вот мое меню HTML:

<ol id="meter" class=""> 
<li>Page 1</li> 
<li>Page 2</li> 
<li>Page 3</li> 
<li>Page 4</li> 
</ol> 

Тогда у меня есть функция, которая выглядит следующим образом:

function levels() { 
$("#meter").addClass(stepNumber); 
} 

на первой странице, я устанавливаю класс «один», на второй странице, чтобы " два "и т. д.

Если класс« один », я хочу показать только первый элемент. Если это «два», я хочу только показать первый и второй и т. Д.

Я знаю, что могу что-то сделать с помощью css, где я пишу стиль для каждого класса, но это кажется глупым. Как мне сделать это с помощью jQuery?

Answer 1

Попытка установки className к 1, 2 ->100, и используя :gt() Selector селектор

function levels(stepNumber) { 
 
    $("#meter").addClass(stepNumber) 
 
    .find("li:gt(" + (stepNumber - 1) + ")") 
 
    .hide(); 
 
} 
 

 
levels(2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<ol id="meter" class=""> 
 
    <li>Page 1</li> 
 
    <li>Page 2</li> 
 
    <li>Page 3</li> 
 
    <li>Page 4</li> 
 
</ol>

В качестве альтернативы, для поддержания добавления className, как one, two ->onehundred, может создать объект для представления количества предметов, которые будут отображаться для каждого class

var keys = { 
 
    1: "one", 
 
    2: "two", 
 
    3: "three", 
 
    4: "four" 
 
}; 
 

 
function levels(stepNumber) { 
 
    $("#meter").addClass(keys[stepNumber]) 
 
    .find("li:gt(" + (stepNumber - 1) + ")") 
 
    .hide(); 
 
} 
 

 
levels(2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<ol id="meter" class=""> 
 
    <li>Page 1</li> 
 
    <li>Page 2</li> 
 
    <li>Page 3</li> 
 
    <li>Page 4</li> 
 
</ol>

Answer 2

Почему бы не использовать цикл for, связанный с некоторым jQuery, чтобы установить соответствующее количество элементов в отображаемое состояние? Например:

var count = // number from class 
var listElements = $('#meter').children() 
for (i = 0; i < count; i++) { 
    $(listElements[i]).addClass('active'); 
} 

В этом классе «активный» будет добавлено свойство отображения. Это имеет смысл для вас?

Обратите внимание, что вам нужно будет редактировать имена дочерних классов, чтобы они могли использоваться как индексы в цикле for.

Answer 3

Вы можете добавить соответствующие классы для каждой страницы. Например: "PAGE_1", "page_2" ...

<ol id="meter" class=""> 
<li class="page_1">Page 1</li> 
<li class="page_2">Page 2</li> 
<li class="page_3">Page 3</li> 
<li class="page_4">Page 4</li> 
</ol> 

добавить этот CSS:

#meter li{display:none;} 

И сценарий будет:

function currentPage(pageNum){ 
     $("#meter li").each(function(){ 
      if(parseInt($(this).attr("class").split("_")[1]) <= pageNum){ 
       $(this).show(); 
      }else{ 
       $(this).hide(); 
      } 
     }) 
    } 

Вы Тригер это так :

currentPage(3); 

Вот пример jsfiddle: https://jsfiddle.net/216tw9u7/