Javascript каждый цикл через настройки ползунков

Question

Я пытаюсь сделать каждый цикл для настроек моих пятных ползунков.

Содержание в настройках выглядит следующим образом:

$('.slider1').slick({ 
    dots: false, 
    infinite: true, 
    swipe: false, 
    speed: 300, 
    slidesToShow: 4, 
    slidesToScroll: 1, 
    prevArrow: ".pp1", 
    nextArrow: ".nn1", 
}); 

$('.slider2').slick({ 
    dots: false, 
    infinite: true, 
    swipe: false, 
    speed: 300, 
    slidesToShow: 4, 
    slidesToScroll: 1, 
    prevArrow: ".pp2", 
    nextArrow: ".nn2", 
}); 

Таким образом, каждый слайдер нуждается в основном одни и те же параметры, но с селектором и классом в prevArrow и nextArrow повысит один для каждого из них. Все они имеют общую родительскую оболочку, называемую .slider-wrapper.

Я думаю, что мне нужно сделать каждый цикл родителя, получить дочерний элемент.

ползунок +=1 и использовать +=1 в настройках prev/next.

var prev = '.pp'; 
var next = '.nn'; 
var sliders = '.slider'; 
function prevAdd() { 
    return prev += 1; 
}; 

function nextAdd() { 
    return next += 1; 
}; 

function slidersAdd() { 
    return sliders += 1; 
}; 

$.each('.slider-wrapper').child(slidersAdd()).slick({ 
    prevArrow: prevAdd(), 
    // various settings 
}); 

Это, вероятно, полный ошибок, но это в значительной степени лучшее, что я мог бы решить самостоятельно.

EDIT: Html разметка

<div class="slider-wrapper"> 
    <div class="slider-nav> 
     <button class="pp1">prev</button> 
     <button class="nn1">next</button> 
    </div> 
    <div class="slider1"> 
     <!-- list of divs for slider elements. Irrelevant for problem --> 
    </div> 
</div> 

<div class="slider-wrapper"> 
    <div class="slider-nav> 
     <button class="pp2">prev</button> 
     <button class="nn2">next</button> 
    </div> 
    <div class="slider2"> 
     <!-- list of divs for slider elements. Irrelevant for problem --> 
    </div> 
</div> 

и так далее с несколькими ползунками.

Answer 1

Если ползунки все имеют класс slider, то вы могли бы сделать это, применяя метод each на выбранной коллекции элементов:

$('.slider-wrapper .slider').each(function (index, slider) { 
    var id = index + 1; 
    $(slider).slick({ 
     prevArrow: ".pp" + id, 
     nextArrow: ".nn" + id, 
     // various settings 
    }); 
}); 

Если вы не имеете slider класс на каждый ползунок элемента, но класс с уникальным номером суффиксом к нему, а затем использовать этот селектор:

$('.slider-wrapper [class^=slider]').each(// ...etc 

но на самом деле, вы не должны назначать различные классы для каждого ползунка. Имя класса не является уникальным идентификатором. Вы можете использовать его для аналогичных элементов.