jqueryでより良いループですか？

Question

私は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); 

Answer 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の複雑なブロックを構築するための驚異をやりました。

Answer 2

カレンダーを作るとき、あなたが覚えておく必要があります物事：

1. 毎月の日の別の番号を持っています。

2. 2月は、うるう年の29日間です。

3. うるう年を計算することは、ほとんどの人が理解するより複雑です。 4で割り切れる年はうるう年です。彼らはまた、割り切れるでない限りただし、100で割り切れるいる年は、あなたがあなた自身のコードを書きたい場合、多くはjQueryのを使用するために行うということがない400

により、閏年されていません実際に使用する必要のあるループの数を減らしています。

// 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でカレンダーを表示/非表示にしてください。

Answer 3

モジュラス演算子。代わりに：

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

あなたが行うことができます。

if (i%4){ 

はまた、文字列の連結が遅いです。私はと思っています。あなたのHTML文字列を配列に追加してjoin（）する方が速いです。間違っている可能性があります。

Answer 4

文字列連結を使用して、HTMLマークアップを作ることは

私はこのカレンダーのHTMLテンプレートを作成し、データとそれを埋めるために好む）=良いjQueryのような考えではありません。このためにjQuery Templateプラグインを使用することができます(link to plugin page from jquery.com)

後でマークアップを変更する必要がある場合は、1つのhtmlテンプレートより多くの文字列を変更することがより困難になります。