一个更好的循环与 jquery？答案

【问题标题】：A better loop with jquery?一个更好的循环与 jquery？
【发布时间】：2011-10-15 01:37:36
【问题描述】：

我在 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);

【问题讨论】：

并非所有月份都有 31 天 ;)
我知道 :) 我故意保持示例代码简单

标签： javascript jquery coding-style iteration

【解决方案1】：

查找jQuery Templates。它们允许您做您正在做的事情，而无需在这样的循环中手动连接字符串。这是其工作原理的示例：

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 块方面创造了奇迹。

【讨论】：

这真是太棒了！可能的错字：在第一行，你写了{$id}，但我相信你的意思是${id}。

【解决方案2】：

制作日历时必须记住的事项：

每个月都有不同的天数。
闰年二月有 29 天。
计算闰年比大多数人意识到的要复杂。能被 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 datepicker UI 组件。我用过很多次，而且效果很好。显然，这取决于您是否真的需要一个日期选择器，或者只是想显示一个完整的年度日历以显示日程或其他内容。

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

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

例如在这里试试：http://www.jsmadeeasy.com/javascripts/Calendars/list_test.asp

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

【讨论】：

【解决方案3】：

模数运算符。而不是：

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

你可以这样做：

if (i%4){

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

【讨论】：

你不会说if (i%4 == 0)吗？我相信说if (i%4) 等于说if (i%4 == 1)。
呃，你确定吗？ !(i%4) 等价于 javascript 中的 (i%4 != 1)，它的作用与原来的 (i==4 || i==8 || i==12) 不同。
是的，我确定。温特穆特和支持他的人实际上是错误的。 (i % 4) 就像在说“如果我除以 4 有余数”。而我们想说!(i % 4)，意思是“如果我除以4没有余数。”
当你说不应该是if (i%4 == 0) 时你是正确的，但当你说(i % 4) 等于if (i%4 == 1) 时是错误的，因为如果我的值为6，例如，@ 987654334@ 将等于 2。因此，考虑到这一点，您应该使用 !(i % 4) 将整个操作评估为布尔值。这样，如果余数为 1、2 或 3，则将其评估为“真”，如果余数为 0，则将其评估为“假”。现在条件是“如果不为真则允许”，这与“如果为假则允许”相同，所以如果余数为 0，我们得到“假”并且条件通过。令人困惑！

【解决方案4】：

使用字符串连接制作 html 标记并不是一个类似 jquery 的好主意 =)

我更愿意为这个日历制作 HTML 模板并用数据填充它。您可以为此使用 jQuery 模板插件 (link to plugin page from jquery.com)

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

【讨论】：