Question

有没有办法让这段代码变成1块？

$('#product INPUT:checked').each(function () {
         data.box1.push({
              id: $(this).attr("id")
         });
});


$('#product .dropSelect OPTION:selected').each(function () {           
      data.drops.push({
            value: $(this).val()
      });
});


$('#product .setSelect OPTION:selected').each(function () {           
      data.set.push({
           value: $(this).val()
     });
});

Answer 1

嗯，您可以使用测试轻松组合第二个和第三个块：

$('#product OPTION:selected').each(function () {           
    if ($(this).parent().hasClass("dropSelect")) {
        data.drops.push({
            value: $(this).val()
        });
    } else if ($(this).parent().hasClass("setSelect")) {
        data.set.push({
            value: $(this).val()
        });
    } // end if
});

虽然这不会短得多，但它的优点是可以节省jQuery使用类选择元素的麻烦，这比选择ID或标签更加密集。通过在单个元素上而不是在整个文档上测试类的存在，您应该提高整体性能。（当然，这可能不是一个明显的改进，但优化很少是一件坏事。）

Answer 2

这应该有用，请注意我更喜欢使用变量来提高可读性和性能。

var $product = $('#product');
var selector = 'INPUT:checked, .dropSelect OPTION:selected, .setSelect OPTION:selected';

$(selector, $product).each( function () {
    var $this = $(this);
    if ( $this.is('INPUT:checked') ) data.box1.push( { id: this.id } );
    if ( $this.hasClass('dropSelect') ) data.drops.push( { value: this.value } );
    if ( $this.hasClass('setSelect') )  data.set.push( { value: this.value } );     
});

Answer 3

你可能无法缩短它，但如果你想要它更模块化，你可以尝试这样的方法：

function pushItems(items, dest, objFunc) { 
   items.each(function(i, el) { dest.push(objFunc(el)); });
}
function extractId(el) { 
   return { id: $(el).attr('id') };
}
function extractValue(el) { 
   return { value: $(el).val() };
}

pushItems($('#product INPUT:checked'), data.box1, extractId);
pushItems($('#product .dropSelect OPTION:selected'), data.drops, extractValue);
pushItems($('#product .setSelect OPTION:selected'), data.set, extractValue);

Answer 4

$('#product').each(function(){
    $(this).children('input:checked').each(function(){
        data.box1.push({
              id: $(this).attr("id")
         });
    })
    $(this).children('.dropSelect OPTION:selected').each(function(){
        data.drops.push({
            value: $(this).val()
      });
    })
    $(this).children('.setSelect OPTION:selected').each(function(){
        data.set.push({
           value: $(this).val()
        });
    })
})

如何缩短这个jquery代码？

4 个答案: