問題與jQuery對象和循環

Question

我現在正在創建一個jQuery插件，這將一個<select>變成一個漂亮的下拉菜單，我雖然有一點點問題，我可以得到選擇的選項頁面上，通過這樣做，

var self = $(this); 
    name = self.attr('name'); 
    select_options = $(this).children(); 
    // an array so that we can related options together 
    sorted_options = []; 
    //loop through the options sorting them into the array as we go. 
    for(i=0;select_options.length>i;i++) { 
     sorted_options.push({ 
      'value': select_options.eq(i).val(), 
      'name': select_options.eq(i).text() 
     }); 
    } 

所以我得到的選項，然後將它們整理到一個數組，當我推這個數組我的控制檯我得到以下，

[Object { value="0", name="I'm looking for..."}, Object { value="1", name="actors"}, Object { value="2", name="presenters"}, Object { value="3", name="voice overs"}] 
[Object { value="0", name="Skill"}, Object { value="1", name="actors"}, Object { value="2", name="presenters"}, Object { value="3", name="voice overs"}, Object { value="4", name="dancers"}, Object { value="5", name="accents"}, Object { value="6", name="film"}, Object { value="7", name="tv"}] 
[Object { value="0", name="Gender"}, Object { value="1", name="male"}, Object { value="2", name="female"}] 

我的第一個問題是我怎樣才能從數組中刪除所有值爲0的插件作爲我的插件取代從下拉列表中的第一項，如果用戶告訴它太，之前我做了一些改變，因爲我是如何得到的選項，我用下面，

options.splice(0, 1); 

但選擇不再存在，所以我不能隨便刪除每個數組的第一個項目，其次我需要的價值觀和名稱添加到我的新的下拉菜單，但是我有這個問題，

我使用此代碼值的時刻追加，

for(i=0;sorted_options.length>i;i++) { 
    $('.dropdown dd ul').append('<li <a href="#"><span class="option">'+ sorted_options[i]['value'] + '</span><span class="value">' + sorted_options[i]['name'] + '</span></a></li>'); 
} 

但是，這增加了我在我看到的所有3個對象第一個下拉列表的控制檯，我在控制檯中看到的第二個對象中的2個對象，以及最後一個下拉列表中的1個對象。

我需要添加的第一個對象，以第一個下拉，第二到第二和第三的第三等

Answer 1

您可以從列表中進行篩選，具有value財產等於所有對象這樣：

/** 
* Remove from a list all object having `obj.value` == value (ex. 0). 
* 
* @param {Object} value The value to avoid. 
* @param {Array:Object} A list of objects. 
* @return {Array:Object} The new filtered Array.-*emphasized text* 
*/ 
function filterByValue(value, list) { 
    var newlist = [], 
     obj, 
     max, 
     i; 

    for (i = 0, max = list.length; i < max; i += 1) { 
     obj = list[i]; 

     if (obj.value !== value) { 
     newlist.push(obj); 
     } 
    } 
} 

var newList = filterByValue(0, list); 

現在你已經來過濾select_options列表（這是一個列表的列表）：

function filter_selectOptions(select_options) { 
    var sortedOptions; 
     max, 
     i; 

    for (var i = 0, max = select_options.length; i < max; i += 1) { 
     sortedOptions = select_options[i]; 
     sortedOptions = filterByValue(0, sortedOptions);    
    } 
} 

然後，您必須將正確的options列表附加到其各自的select。

var uls = document.getElementsByClassName("dropdown"). 
        .getElementsByTagName("dd"). 
        .getElementsByTagName("ul"); 

for (var i = 0, max = uls.length; i < max; i += 1) { 
    ul = uls[i]; 

    sortedOptions = sortedOptions[i]; 

    ul.innerHTML = '<li <a href="#"><span class="option">'+ sortedOptions[i]['value'] + '</span><span class="value">' + sortedOptions[i]['name'] + '</span></a></li>'; 
} 

Answer 2

對於第一個問題，您可以使用jQuery.grep()函數來過濾數組的元素。

var filteredArray = $.grep(rawArray, function(v,i) { 
    return (v.value === '0' ? null : v); 
}); 

關於第二個問題，我可能做到這一點的線沿線的（如果我理解正確）使用jQuery.each：

var template = $(
    '<li><a href="#"><span class="option"></span><span class="value"></span></a></li>' 
), dropdown = $('.dropdown dd ul'); 

// notice that the args of $.grep and $.each are reversed 
$.each(filteredArray, function(i,v) { 
    // add the (i)th object to the (i)th dropdown 
    dropdown.eq(i).append(
     template.clone() 
      .find('.option').text(v.value).end() 
      .find('.value).text(v.name).end() 
    ); 
}); 

所以基本上：

1. jQuery有內置的功能用於過濾和迭代原始JS數組。
2. 緩存您插入到DOM中的HTML模板（以便jQuery不必每次將其添加到文檔時都要經過整個「選擇」shebang）
3. 緩存下拉選擇，以及原因相同。