jQuery 对象和循环的问题

Question

我现在正在创建一个 jQuery 插件，它将 变成一个漂亮的下拉菜单，不过我遇到了一点问题，我可以在页面，通过这样做，

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

对于第一个问题，您可以使用 jQuery.grep()函数过滤数组的元素。

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

对于你的第二个问题，我可能会按照（如果我理解正确的话）使用 < code>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. 出于同样的原因，也缓存下拉选择。

Answer 2

您可以从列表中过滤出 value property 等于 0 的所有对象，方法如下：

/**
 * 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>';
}