jQueryでリストを弄るときのメモ的な何か

jQueryについてはド素人です。
そんな人のメモ。
例えば以下のようなリストタグがあるとする
<div id="test">
<ul>
<li><a href="https://www.google.co.jp">その1</a></li>
<li><a href="https://www.google.co.jp">その2</a></li>
<li><a href="https://www.google.co.jp">その3</a></li>
</ul>
</div>
「その2」を書き換えて、ついでに「その2」と「その3」の間にもう1つリストを追加したいと
<div id="test">
<ul>
<li><a href="https://www.google.co.jp">その1</a></li>
<li><a href="https://www.yahoo.co.jp">Yahooやで</a></li>
<li><a href="http://www.msn.com/ja-jp">Bingやで</a></li>
<li><a href="https://www.google.co.jp">その3</a></li>
</ul>
</div>
そんなとき、どーしようかな。と悩んだわけです。
悩んだ結果4通りの書き方を思いついたんですわ。
// 要素をそれぞれ指定した
$(function(){
$('#test li:eq(1)').html('<a href="https://www.yahoo.co.jp">Yahooやで</a>');
$('#test li:eq(1)').after('<li><a href="http://www.msn.com/ja-jp">Bingやで</a></li>');
});
// 変数を宣言してみた 第一弾
$(function(){
var list = $('#test li:eq(1)')
$(list).html('<a href="https://www.yahoo.co.jp">Yahooやで</a>');
$(list).after('<li><a href="http://www.msn.com/ja-jp">Bingやで</a></li>');
});
// メソッドチェーンつかってみた
$(function(){
$('#test li:eq(1)').html('<a href="https://www.yahoo.co.jp">Yahooやで</a>').after('<li><a href="http://www.msn.com/ja-jp">Bingやで</a></li>');
});
// 変数を宣言してみた 第二弾
$(function(){
var yahoo = '<a href="https://www.yahoo.co.jp">Yahooやで</a>'
var bing = '<li><a href="http://www.msn.com/ja-jp">Bingやで</a></li>'
$('#test li:eq(1)').html(yahoo).after(bing);
});
たぶんどれでもいけるけど“メソッドチェーンつかってみた”が一番良い気がする。変数を宣言してないし、ここだけ弄りたいんだから。
ちなみに1つめはクソだと思います!
ディスカッション
コメント一覧
まだ、コメントがありません