За заголовок простите, не смог его сформулировать лучше.
Есть (ну как есть - я его создаю) массив объектов вида:
Часть элементов принадлежит к типу - Сезон
, часть - к Размеры
, хочу их объединить по категориям, получается так, что при пуше каждый раз создаётся новый объект. Подскажите пожалуйста, как пушить в массив так, чтобы он имел такой вид?
Вот как это делаю я, очевидно, что я далёк от правильного решения. Линк на песочницу.
function filterFunc() {
let checkboxInputs = $('input[type="checkbox"]'),
tempArr = [];
checkboxInputs.on('click', function() {
$(this).each(function() {
let currentFilterTypeName = $(this).closest('.form-group').find('.title').text().trim(),
currentFilterItemID = $(this).attr('id'),
currentFilterItemValue = $(this).closest('li').find('label').text().trim();
tempArr.push({
currentFilterTypeName: currentFilterTypeName,
currentFilterItemID: [currentFilterItemID],
currentFilterItemValue: [currentFilterItemValue]
});
})
console.log(tempArr);
});
}
filterFunc();
ul {
margin: 0 0 20px 0;
padding: 0;
list-style: none;
}
.title {
margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter-block content">
<div class="form-group season">
<div class="title">Сезон</div>
<ul class="checkbox-list">
<li>
<input type="checkbox" id="seasonSummer">
<label for="seasonSummer">Лето</label>
</li>
<li>
<input type="checkbox" id="seasonWinter">
<label for="seasonWinter">Зима</label>
</li>
<li>
<input type="checkbox" id="seasonSpring">
<label for="seasonSpring">Весна</label>
</li>
</ul>
</div>
<div class="form-group size">
<div class="title">Размер</div>
<ul class="checkbox-list">
<li>
<input type="checkbox" id="size18">
<label for="size18">18</label>
</li>
<li>
<input type="checkbox" id="size19">
<label for="size19">19</label>
</li>
<li>
<input type="checkbox" id="size20">
<label for="size20">20</label>
</li>
</ul>
</div>
</div>