jQuery - 写这个的简写方式

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可能会使调试它变得更加尴尬.Utkanos在他的回答中指出,你也可以走得更远.

另外:只有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);
    });
});

...可能就像你能做到的那样简洁,但是可以说是可读性的代价.