將HTML選擇器轉換爲對象

-1

我正在創建一個將HTML選擇器轉換爲可自定義菜單的腳本。我需要從我的HTML中返回一個嵌套對象（如圖2）。將HTML選擇器轉換爲對象

即返回此圖1

<select id="orderBy">     
    <option value="order-by=newest&">newest</option> 
    <option value="order-by=relevance&">relevance</option> 
</select> 
<select id="searchBy">     
    <option value="search-by=name&">name</option> 
    <option value="search-by=number&">number</option> 
</select>

作爲對象，像這樣：圖2

selectors = [  
    {"id":"orderBy", "options" : [ 
     {"value":"search-by=newest&", "name":"search-by=relevance&"} 
    ]}, 
    {"id":"searchBy", "options" : [ 
     {"value":"search-by=name&", "name":"search-by=number&"} 
    ]} 
];

到目前爲止我的代碼，雖然這是行不通的。

var selector = new Object; 

//Find all select boxes and push their ID's' into selector 
$("#filter").find("select").map(function(i){ 
    selector[i] = this.id; 
}); 

//Find all select boxes and push their ID's' into selector 
$("#" + selector[i]).find("option").map(function(i){ 
    optionText[i] = $(this).text(); 
    optionValue[i] = $(this).val(); 
});

摘要

上面的代碼返回

Object {0: "orderBy", 1: "searchBy"}.

我在做什麼錯？

來源

2016-11-13 Elliott James

更高層次的目標似乎仍然過於寬泛。不清楚您的意思是整頁還是隻是特定的標籤或頁面的特定部分。在第二個代碼片段中，「i」顯然是未定義的，但如果您對創建的對象感到滿意，則不清楚。總之......你應該更具體地說明你的問題 – charlietfl

@charlietfl - 我已經編輯了這個問題，希望能縮小這個問題的範圍。謝謝。 –

爲了使用map()創建一個數組，您需要在回調中返回一個對象。

你可能想要的東西更像

var data = $('#container select').map(function(){ 
    // create array of option objects for this select instance 
    var opts = $(this).children().map(function(){ 
     // return an object for each element of array 
    return{ 
     text: $(this).text(), 
     value: this.value 
    } 
    }).get(); 
    // now an object for this select instance 
    var obj={ 
    id:  this.id, 
    options: opts // array from above 
    } 
    return obj; 

}).get();

DEMO

來源

2016-11-13 21:31:36 charlietfl

這是一個非常好的答案，謝謝。雖然我會解決你的答案，但我有興趣知道.map（）或.serializeArray（）;是更好的方式去？自發布問題以來，我一直在閱讀它。 –

一切都取決於目前還不清楚的目標。 'serializeArray（）'只會返回每個選擇的名稱和當前值 – charlietfl

最終，我正在嘗試創建一個腳本，將

將HTML選擇器轉換爲對象

回答