ワンポイント・CoffeeScript で jQuery を操作してDOM要素を組み立てる #jQuery

追記 CoffeeScript-1.7.0 で改行後の `.` の扱いが変わっています。

1.7.0以降では１行で記述するか、適宜行末に \\ を追加して下さい。

気分としては「twitterで一言つぶやきたい」だけの内容。
気づいて「へー」と思ったので書いておく。たぶん有名なんだよね。

例

test.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="test.js"></script>
</body>
</html>

test.coffee

$('body')
    .append $('<div>')
    .append $('<span>')
    .append 'HOGE'

こうすると、このようにコンパイルされ、

test.js

  // Generated by CoffeeScript 1.6.3
  $('body').append(($('<div>')).append(($('<span>')).append('HOGE')));

実行されると、このような結果になる。

<body>
  <div>
    <span>HOGE</span>
  </div>
</body>

補足

ポイントは、

$('body').append($('<div>')).append($('<span>')).append('HOGE')

↓　は、

  $('body').append($('<div>')).append($('<span>')).append('HOGE');

となるが、

$('body').append   ($('<div>')).append   ($('<span>')).append('HOGE')

↓　なら、

  $('body').append(($('<div>')).append(($('<span>')).append('HOGE')));

となる事。 ※append の後の空白に注目。

空白がないと以下のような結果になる。

$('body')
    .append('<div>')
    .append('<span>')
    .append('HOGE')

<body>
  <div></div>
  <span></span>
  HOGE
</body>

場面によって使い分けよう。

ワンポイント・CoffeeScript で jQuery を操作してDOM要素を組み立てる

追記 CoffeeScript-1.7.0 で改行後の . の扱いが変わっています。

例

補足

追記 CoffeeScript-1.7.0 で改行後の `.` の扱いが変わっています。