- ベストアンサー
リストの最後にクラス名を追加したい
javascriptでリストタグ（li）の最後にクラス名を追加するにはどうしたらいいか教えて下さい。 htmlはこんな感じです。 <ul id="sample"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> よろしくお願い致します。
- sakage6
- お礼率25% (1/4)
- JavaScript
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 おぉっと！失礼しました。 babu_babooさんのおっしゃる通りですね。 エスパーじゃないのでどうせ外れだろうと思って、よりによってIEでしか確認していませんでした。 （＞babu_baboo様 ： Thank youで～す！） 以下、ていせいです。 もっとも無条件にclassを追加しているだけなので、例えばこのサンプルではボタンを何度も押すと class=" class1 class1 class1・・・" みたいなことになります。 単純に方法のサンプルとして提示していますので、実装する際にはちゃんとチェックしてから追加するなどの方が良いでしょう。（あるいは、条件的に可能なら 「+=」を「=」にするとか…） <html> <head> <style type="text/css"> .class1 { color:red; } </style> </head> <body> <ul id="sample"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> <p> <button type="button" onclick=" var l = document.getElementById('sample').getElementsByTagName('LI'); if (l.length) l[l.length-1].className += ' class1'; ">class1を追加</button> </body> </html>
その他の回答 (3)
- yambejp
- ベストアンサー率51% (3827/7415)
こうしてみては？ <style> ul#sample li{ /*IE対策*/ behavior:expression(this.className=(this.nextSibling == null)?"last-child":"") } ul#sample li:last-Child,ul#sample li.last-Child{ color:red; } </style> </head> <body> <ul id="sample"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> クラス名の競合などかんがえるともう少し工夫が必要ですが
- babu_baboo
- ベストアンサー率51% (268/525)
.lastChildがliとはかぎらない。とか
- fujillin
- ベストアンサー率61% (1594/2576)
難問ですね。どこに何を（どのクラス名）を追加するのかが良くわかりません。 エスパーになったつもりで… こんなの？ <html> <head> <style type="text/css"> .redclass { color:red; } </style> </head> <body> <ul id="sample"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> <p> <button type="button" onclick=" document.getElementById('sample').lastChild.className += ' redclass'; ">redclassを追加</button> </body> </html> あるいは、こんなのか？ <html> <head></head> <body> <ul id="sample"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> <p> <button type="button" onclick=" var l = document.createElement('LI'); l.appendChild(document.createTextNode('クラス名')); document.getElementById('sample').appendChild(l); ">「クラス名」を追加</button> </body> </html> たぶんエスパーならぬ凡人で終わることでしょう。
補足
質問に書いたhtmlを <html> <head> <style type="text/css"> .class1{ color:red; } </style> </head> <body> <ul id="sample"> <li>リスト1</li> <li>リスト2</li> <li class="class1">リスト3</li> </ul> </body> </html> としたいので、fujillinが書いてくださった前者のソースが近いと思います。が、ボタンを押してもクラス名が追加されていないのか、文字が赤くならず…。
お礼
思い通りに動作しました。 なるほど、こういう時はlength-1を使えばよかったのですね、勉強になりました。 回答どうもありがとうございました！