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

2017年9月14日ソフトウェア, 技術, 雑多

画像出典: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つめはクソだと思います!

Posted by みせる