獲取檢查：複選框，並將它們放入一個數組（取決於最接近的UL）

Question

我正在嘗試構建一個網頁，發佈過濾器通過對PHP的Ajax調用並操縱要顯示的數據。

這是我用來獲取值/數據的代碼。

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）。我想獲得檢查項目的ID與最接近的'ul'的組合。 我試圖使用

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

但後來我得到重複的數組名稱。 E.g：

[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); 
});