Question

我有以下jQuery脚本，我需要一些缩短的帮助。这个脚本有效，但显然不是最好的。

jQuery( document ).ready(function() {

var expenses = jQuery( "#expenses tbody tr" ).length;
var income = jQuery( "#income tbody tr" ).length;
var bills = jQuery( "#bills tbody tr" ).length;

jQuery( ".income .badge" ).text( income );
jQuery( ".expenses .badge" ).text( expenses );
jQuery( ".bills .badge" ).text( bills );

});

谢谢！

Answer 1

嗯，你可以这样做，但我不确定它会给你买多少：

jQuery(function($) {
    $( ".income .badge" ).text( $( "#income tbody tr" ).length );
    $( ".expenses .badge" ).text( $( "#expenses tbody tr" ).length );
    $( ".bills .badge" ).text( $( "#bills tbody tr" ).length );
});

注意：

即使在noConflict模式下，如果您正在使用ready回调，则它的第一个参数是jQuery函数。因此，您可以使用名称$接受该参数，并在ready回调中使用该参数。
jQuery(function($) { ... })在功能上与jQuery(document).ready(function($) { ... });完全相同（例如，它是一条捷径）。
在使用之前，您不必将值保存到局部变量。

但请注意，如果需要，＃2可能会让调试它变得更加尴尬。你也可以{Untkanos在答案中指出go a bit further。

另外：如果您不控制脚本标记的位置，则只需要ready。如果您这样做，只需将脚本标记放在文档的末尾，就在结束</body>标记之前，您可以放弃ready。但是你仍然可能想要包装函数：

(function($) {
    $( ".income .badge" ).text( $( "#income tbody tr" ).length );
    $( ".expenses .badge" ).text( $( "#expenses tbody tr" ).length );
    $( ".bills .badge" ).text( $( "#bills tbody tr" ).length );
})(jQuery);

Answer 2

jQuery(function($) {
    $.each(['income', 'expenses', 'bills'], function(index, cat) {
        $('.'+cat+' .badge').text($('#'+cat+' tbody tr').length);
    });
});

......可能就像你能做到这一点一样简洁，但是可以说是可读性。

Answer 3

您可以编写一个可以执行jQuery操作的函数，然后使用所需的参数

调用它

jQuery(function ($) {
    function write(ct, badge) {
        $(badge).find(".badge").text($(ct).find(" tbody tr").length);
    }

    write('#expenses', '.expenses');
    write('#income', '.income');
    write('#bills', '.bills');
});

或者甚至（因为类名和id是相同的）

jQuery(function ($) {
    function write(selector) {
        $('.' + selector).find(".badge").text($('#' + selector).find(" tbody tr").length);
    }

    write('expenses');
    write('income');
    write('bills');
});

Answer 4

我真的很喜欢过于复杂的事情，所以就这样了。

$(document).ready(function() {
  var values = ['expenses', 'income', 'bills']; // if you need another badge you add it here
  $.each(values, function(i, val) {
    $("."+ val +" .badge" ).text($("#" + val + " tbody tr" ).length);
  });
});

Answer 5

以下代码将执行相同的操作：

$(document).ready(function () {
    ['income', 'expenses', 'bills'].forEach(function(element){
        $('.' + element + ' .badge').text($('#' + element + ' tbody tr').length);
    });
});

但代价是可读性略有下降。

Answer 6

如果您将课程foo添加到#expenses #income #bills，则可以执行以下操作：

$('.foo').each(function(i, el){
    var $this = $(this);
    var amount = $this.find("tbody tr").length;

    $('.' + $this.prop('id') + ' .badge').text(amount);
});

注意：对于1.6之前的jQuery，您必须使用.attr代替.prop

jQuery - 写这个的简写方式

6 个答案: