Выбор элементов с первого по заданный

288

15 декабря 2016, 16:19

В данном коде

$(".onepage-pagination li a" + ".active").removeClass("active");
$(".onepage-pagination li a" + "[data-index='" + (page_index) + "']").addClass("active");

добавляется класс active кнопкам текущей страницы. Мне нужно, чтобы класс active добавлялся всем кнопкам с первой по текущую.

Как это реализовать?

Answer 1

Если правильно понимаю, вы хотите отмечать активным кнопки с атрибутом data-index, значение которого меньше или равно page_index, да?

var page_index = 4; 
 
$(".onepage-pagination li a").removeClass("active").each(function() { 
    if (+$(this).attr("data-index") <= page_index) { 
        $(this).addClass("active"); 
    } 
});

.active { 
  background-color: yellow; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="onepage-pagination"> 
    <li><a href="#" data-index="1">1</a> 
    <li><a href="#" data-index="2">2</a> 
    <li><a href="#" data-index="3">3</a> 
    <li><a href="#" data-index="4">4</a> 
    <li><a href="#" data-index="5">5</a> 
    <li><a href="#" data-index="6" class="active">6</a> 
</ul>

Answer 2

Думаю, можно сделать проще. И старайтесь, особенно в больших проектах, использовать меньше условных операторов.

var page_index = 4;
$(".onepage-pagination li a").removeClass("active");
$(".onepage-pagination li a:lt("+page_index+")").addClass("active");
});

Или ещё удобнее и проще вариант с методом .slice():

var page_index = 4,
       items_pag = $(".onepage-pagination li a");
items_pag.removeClass("active");
items_pag.slice(0,page_index).addClass("active");
});