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 属性的对象等于 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>';
}

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

基本上是这样的：

jQuery具有内置的功能，可以过滤和迭代原始JS数组。
缓存您插入到DOM中的HTML模板（这样，每当您将文件添加到文档中时，jQuery都不必完全“选择”shebang）
同样缓存下拉列表选择，原因相同。

jQuery对象和循环的问题

2 个答案: