jQueryの.attr()メソッドでのHTMLクラス指定の話
これまでずっとjQuery1.5.1を使用していたのですが先日まとめて最新の1.7.1に変更しました。
その際.attr()メソッドの扱いで少しハマってしまったのでそのことについてです。
jQuery1.6以降はそれ以前のバージョンで使用できた
<body> <ul id="testID"> </ul> <script> $("<li>").attr("className","testClass").text("テストです").appendTo("#testID"); $("<li>").attr({className:"testClass"}).text("これもテストです").appendTo("#testID"); </script> </body>
というclassNameという名前でのclass属性指定ができなくなっています。
そもそもclass属性を指定するのにclassNameという名前が使えたのはIEにおいてclassという名前が予約語になっていてそのままでは使えないためだったのですがjQuery公式ページに
The name "class" must be quoted in the map since it is a JavaScript reserved word, and "className" cannot be used since it is not the correct attribute name.
http://api.jquery.com/jQuery/#jQuery2
と書かれていることから、正しい属性名ではないclassNameという名前が使えるのは気持ちが悪いということで廃止されたのかもしれません。
2013/2/1追記。
気持ち悪いから変えたというような漠然としたことではなく1.6で.attr()メソッドと.prop()メソッドが厳密に区別されJavascriptでのプロパティ名であるclassnameはhtmlタグに対する属性を扱うattr()メソッドでは使えなくなったということのようです。
追記ここまで
1.6以降は.attrメソッドを用いてclass属性を指定する場合は
<body> <ul id="testID"> </ul> <script> $("<li>").attr("class","testClass").text("テストです").appendTo("#testID"); $("<li>").attr({"class":"testClass"}).text("これもテストです").appendTo("#testID"); </script> </body>
というようにclassという名前をクォーテーションで囲って使用します。
私は知らなかったのですが、この書き方は従来のバージョンでも可能だったらしくこちらの方法に一本化されたということのようです。
ちなみに1.7.1でclassNameという名前を使うと
<li classname="testClass">テストです</li>
というようにそのままclassnameという属性になります。
なおclass属性のみを付加するのであれば.addClass()メソッドを使う方法もあります。
<body> <ul id="testID"> </ul> <script> $("<li>").addClass("testClass").text("これもまたテストです").appendTo("#testID"); </script> </body>
1.6がでたのは昨年の5月なので今更な情報かとは思いますがもしjQueryのバージョンアップで動作がおかしくなった場合はこれが原因かもしれません。