Получение текущего месяца из массива месяцев

Question

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

Этот массив является динамическим и позволяет сказать, что он имеет следующие месяцы внутри:

«Май», «Июнь»

это может быть, как это так:

"Май", "июнь", "июль" ...

Мне нужно настроить мой ползунок в текущем месяце. Я делал это, как следующее:

swiper.slideTo(new DateTime().getMonth()); // fetches current month index (if May it is 5 since indexation goes from 0) 

И мои слайды выглядит следующим образом:

<div class="swiper-wrapper"> 
    <div class="swiper-slide active"><h3>January</h3></div> 
    <div class="swiper-slide active"><h3>February</h3></div> 
    <div class="swiper-slide active"><h3>March</h3></div> 
    <div class="swiper-slide active"><h3>April</h3></div> 
    <div class="swiper-slide active"><h3>May</h3></div> 
    <div class="swiper-slide active"><h3>June</h3></div> 
    <div class="swiper-slide active"><h3>July</h3></div> 
    <div class="swiper-slide active"><h3>August</h3></div> 
    <div class="swiper-slide active"><h3>September</h3></div> 
    <div class="swiper-slide active"><h3>October</h3></div> 
    <div class="swiper-slide active"><h3>November</h3></div> 
    <div class="swiper-slide active"><h3>December</h3></div> 
</div> 

И индексация в Swiper собирались от 0 до 11, а так можно было легко установить текущий слайд до текущего месяца. Теперь проблема заключается в том, как установить текущий месяц, если массив не начинается с января, но что я все еще могу установить текущий слайд на правильный месяц ... Например, если слайды начинаются с мая по июль ... Если текущий месяц - июнь, я хотел бы иметь возможность установить текущий слайд на июнь ...

Как я могу это сделать?

Answer 1

Это было бы очень легко с помощью jQuery

var search = "May"; 

var indexOfCurrentMonthSwiper; 

var currentMonthSwiper = $(".swiper-slide").filter(function(i){ 
    if ($(this).find("h3").html() == search){ 
     indexOfCurrentMonthSwiper = i; 
     return true; 
    } 
    return false; 
}); 

console.log(currentMonthSwiper, indexOfCurrentMonthSwiper); 

JSFiddle

Answer 2

Я не уверен, что Javascript имеет функцию из коробки, чтобы перевести индекс месяца в строку. Но если нет, самым простым было бы сохранить фиксированный массив, содержащий все месячные имена в переменной, и найти индекс текущего месяца, который дает имя текущего месяца. Затем вы можете использовать это с .indexOf в вашем массиве слайдов, чтобы получить индекс, чтобы установить слайдер.

Может быть что-то вроде этого:

var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 

function getSliderIndex(slides) { 
    var currentMonthName = MONTHS[new Date().getMonth()]; 
    return slides.indexOf(currentMonthName) 
} 

Answer 3

Если вы должны были дать каждому Див что-то, чтобы идентифицировать месяц (это может быть CSS-классом, идентификатором, атрибутом данных ...), вы можете перебирать DIVS и выбирать тот, который вы хотите.

Ниже приведен пример с атрибутом пользовательских данных:

<div class="swiper-wrapper"> 
    <div class="swiper-slide active" data-month="0"><h3>January</h3></div> 
    <div class="swiper-slide active" data-month="1"><h3>February</h3></div> 
    ... 
    <div class="swiper-slide active" data-month="11"><h3>December</h3></div> 
</div> 

JS:

var curr_month = new DateTime().getMonth(); 
$('.swiper-wrapper').children('div').each(function(i) { 
    if($(this).data("month") === curr_month){ 
     swiper.slideTo(i); 
    } 
});