使用jquery实现更好的循环

A better loop with jquery?

本文关键字：循环 更好 实现 jquery 使用      更新时间：2023-09-26

我在javascript中这样做，只是想知道它是否可以使用更多的jquery更优雅地解决?

var tbl="";
    for(var i=1; i<13; i++) {
        // creating 12 div's, one for each month
        tbl += "<div class='month' id='m"+i+"'>" + months[i-1];
        // creating 31 divs for each day in month
        for(var j=1; j<32; j++) { 
            tbl += "<div class='monthday' id='m"+i+"d"+j+"'>"+
                        "<div class='date_header'>"+j+"</div>" +
                        "<div class='date_info'></div>" +
                   "</div>";
        }
        // close month-div
        tbl += "</div>";
        // insert a clear for each 4th month to get a nice style-break
        if(i==4 || i==8 || i==12) {
            tbl += "<br style='clear: both'>";
        }
    }
    // finished
    $("#friendsinfo").html(tbl);

查找jQuery模板。它们允许你做你正在做的事情，而不需要像那样在循环中手动连接字符串。下面是它如何工作的一个例子:

var template = '<a href="${link}" id="{$id}">${anchor}</a>';
$.template('myTemplate', template);
var data = [];
for (var x = 0; x < something.length; x++) {
    var newLink = {
        link: something[x].url,
        id: 'mylink-' + something[x].id,
        anchor: something[x].title
    };
    data.push(newLink);
}
$.tmpl('myTemplate', data).appendTo('#myContainer');

我已经在几个项目中使用了它们，它们在构建复杂的HTML块方面创造了奇迹。

制作日历时必须记住的事情:

  1. 每个月有不同的天数

  2. 闰年2月有29天。

  3. 计算闰年比大多数人想象的要复杂得多。能被4整除的年份是闰年。但是，能被100整除的年份不是闰年，除非它们也能被400整除。

如果你想编写自己的代码，使用jQuery并不能真正减少你必须使用的循环次数。但是，我建议你去掉这一部分:

// insert a clear for each 4th month to get a nice style-break
if(i==4 || i==8 || i==12) {
    tbl += "<br style='clear: both'>";
}

使用好的CSS使行清晰，或者使用表格代替(在这种情况下实际上可能更合适)。

在任何情况下，您实际上可能想要看一下jQuery日期拾取器UI组件。我用过很多次，效果很好。显然，这取决于你是否真的需要一个日期选择器，或者只是想显示一个完整的年历作为一个时间表或其他东西。

http://jqueryui.com/demos/datepicker/

或者，如果您只需要显示完整的日历，请查看现有的脚本。这种事别人已经做过一千次了，所以没有必要重新发明轮子。

。试试:http://www.jsmadeeasy.com/javascripts/Calendars/list_test.asp

最后一个想法是，使用PHP或任何您正在使用的语言输出日历可能更有效，并使用CSS隐藏div。然后只需让javascript显示/隐藏日历，而不是每次都构建它。

模数运算符。而不是:

if(i==4 || i==8 || i==12) {

你可以:

if (i%4){

另外，字符串连接速度很慢。我认为将HTML字符串添加到数组并join()它们会更快。可能是错的:)

使用字符串连接制作html标记不是一个很好的类似于jquery的想法=)

我更喜欢为这个日历制作HTML模板并填充数据。你可以使用jQuery模板插件(链接到jquery.com插件页面)

如果稍后需要更改标记，那么更改大量字符串比更改一个html模板要困难得多。

相关文章：