Установите флажки и поместите их в массив (в зависимости от ближайшего UL)

Question

Я пытаюсь создать веб-страницу, что размещает фильтры через Ajax-вызов PHP и манипулировать отображаемыми данными.

Это код, который я использую для получения значений/данных.

var $checkboxes = $("input:checkbox");  

$checkboxes.on("change", function() 
{ 
    var opts = getFilterOptions();   
}); 


function getFilterOptions(){ 
    var opts = [];     
    $checkboxes.each(function() 
    { 
    if(this.checked) 
    {        
     opts.push(this.id); 
    } 
    }); 
    return opts; 
} 

У меня есть трудное время с флажками (я использую jQuery btw). Я хотел бы получить идентификатор проверенных элементов в сочетании с ближайшим «ul». Я пытался использовать

opts.push(this.closest('ul').id, this.id); 

Но тогда я получаю дубликаты массив имен. Например:

[0 => 'category: item1'] 
[1 => 'category: item2'] 
[2 => 'category: item3'] 
[3 => 'othercategory: value1'] 
[4 => 'othercategory: value2'] 

Я также попробовал (не так динамичную, но жёстко прописанные решение :)

function getFilterOptions() 
{ 
var opts = []; 

var activity = $('input:checkbox:checked.activity').map(function() 
{ 
    return this.id; 
}).get(); 
console.log(activity); 
return activity; 

var othercategory = $('input:checkbox:checked.othercategory').map(function() 
{ 
    return this.id; 
}).get(); 
console.log(othercategory); 
    return othercategory; 
} 

Но это регистрирует только первые галочки, а не второй (othercategory).

Я хотел бы выбрать все категории в 'ul'. Например:

['category (ul)'] 
    [0 => 'item1', 1 => 'item2'] 
['othercategory (a other ul)'] 
    [0 => 'value1', 1 => 'value2'] 

What I try to accomplish

Answer 1

Вы путаете JQuery и DOM методы. closest() - это метод jQuery, поэтому его нужно называть $(this), а не this. id - свойство DOM, вы не можете называть его объектом jQuery. Так оно и должно быть:

opts.push($(this).closest("ul").attr("id"), this.id); 

Но, похоже, вы не должны использовать массив, вам нужен объект, ключи категории.

var opts = {}; 
$checkboxes.filter(":checked").each(function() { 
    var cat = $(this).closest("ul").attr("id"); 
    if (!opts[cat]) { 
     opts[cat] = []; 
    } 
    opts[cat].push(this.id); 
});