jQuery получение значения последнего выбранного варианта в множественном выборе
На сайте есть фильтрация товаров, есть небольшой скрипт который при выборе фильтра выводит div с кнопкой "Показать". Мне нужно чтобы этот div выводился возле последнего выбранного фильтра.
HTML:
<li class="woof_term_1105 "><input type="checkbox" id="woof_1105_5f3a448442426" class="woof_checkbox_term woof_checkbox_term_1105" data-tax="type1" name="type1_f2" data-term-id="1105" value="1105"><label class="woof_checkbox_label" for="woof_1105_5f3a448442426">Фильтр 1<span class="woof_checkbox_count">(1)</span></label>
<input type="hidden" value="паровой" data-anchor="woof_n_pa_tip-uvlazhnenija_parovoj">
</li>
<li class="woof_term_1114 "><input type="checkbox" disabled="" id="woof_1114_5f3a448442d64" class="woof_checkbox_term woof_checkbox_term_1114" data-tax="type1" name="type1_f2" data-term-id="1114" value="1114"><label class="woof_checkbox_label " for="woof_1114_5f3a448442d64">Фильтр 2<span class="woof_checkbox_count">(0)</span></label>
<input type="hidden" value="фильтр2" data-anchor="woof_n_pa_tip-uvlazhnenija_tradicionnyj">
</li>
<li class="woof_term_1118 "><input type="checkbox" id="woof_1118_5f3a448448ce7" class="woof_checkbox_term woof_checkbox_term_1118" data-tax="type2" name="type2_f2" data-term-id="1118" value="1118"><label class="woof_checkbox_label " for="woof_1118_5f3a448448ce7">Фильтр 3<span class="woof_checkbox_count">(1)</span></label>
<input type="hidden" value="фильтр3" data-anchor="woof_n_pa_osnashhenie-uvlazhnitelja_indikator-urovnya-vody">
</li>
JS:
var arr = jQuery.map(jQuery('[class ^= woof_term_] input:checkbox:checked'), function(e,i) {
return +e.value;
});
//console.log(arr);
function unique(list) {
var result = [];
jQuery.each(list, function(i, e) {
if (jQuery.inArray(e, result) == -1) result.push(e);
});
return result;
}
document.querySelectorAll("#submit-filter").forEach(el => el.remove());
var asd = jQuery('#woof_results_by_ajax').find('p.woocommerce-result-count').text().replace(/[^0-9]/gi, '');
if(asd === '' || asd === null){
jQuery('<div id="submit-filter"><span id="total-filter-count">Один товар</span><input type="submit" name="gofilter" class="button_filter" value="Показать"></div>').insertAfter('.woof_term_' + unique(arr).slice(-1)[0]);
}else{
jQuery('<div id="submit-filter"><span id="total-filter-count">Выбрано: <b>'+parseInt(asd)+'</b></span><input type="submit" name="gofilter" class="button_filter" value="Показать"></div>').insertAfter('.woof_term_' + unique(arr).slice(-1)[0]);
}
jQuery(".button_filter").on('click', function(event){
jQuery('html, body').animate({
scrollTop: jQuery("h1.woocommerce-products-header__title").offset().top
}, 1000)
document.querySelectorAll("#submit-filter").forEach(el => el.remove());
});
Скрипт отрабатывает, однако он выводит последний выбранный вариант (фильтр) исходя из его расположения в DOM, т.е. если выбрать сначала последний фильтр, а потом первый, то покажет div возле последнего, а не первого параметра. Если выбирать фильтры последовательно, сверху-вниз, то тогда работает как и задумано.
Так же пробовал:
var latest_value = jQuery('[class ^= woof_checkbox_term]:checkbox:checked:last').val();
console.log(latest_value);
Результат ангалогичен.