jQueryでウィンドウサイズによって処理を変える

JavaScript

jQueryでreplaceWithやreplaceAllを使って要素を置き換えてみる

jQueryでreplaceWithやreplaceAllを使えば好きな要素から好きな要素へ簡単に置き換えることができます。便利そうですね。ということで勉強がてら使ってみたので備忘録です。ちなみにreplaceWithの方は引数に関数を指定できます。ちょっと加工したい時なんかにも役立ちそうな気がします。

[ads_center]

replaceWith

まずはreplaceWithの基本的な使い方です。以下はsampleというIDの子要素であるp要素をh1へ置き換えます。

HTML

<div id="sample">
    <p>sample</p>
</div>

JavaScript

var sample = $('#sample p');
sample.replaceWith('<h1>sample</h1>');

引数に関数を指定

次は引数に関数を指定してみます。関数の引数もあり、第一引数には要素のインデックス、第二引数にはhtmlの値になります。以下は#sampleの子要素pをliに置き換えて各要素が何番目か番号をつけています。で、それらのli要素をulで括ってあります。

HTML

<div id="sample">
    <p>sample</p>
    <p>sample</p>
    <p>sample</p>
</div>

JavaScript

$('<ul />').appendTo('#sample');
$('#sample p').appendTo('ul');
$('#sample p').replaceWith(function(i, html) {
    return $('<li>' + (i + 1) + '. ' + html + '</li>');
});

実行後のHTMLは以下のようになります。関数の第一引数のiは0から開始されるので、1をプラスして1から開始されるようにしています。

<div id="sample">
    <ul>
        <li>1. sample</li>
        <li>2. sample</li>
        <li>3. sample</li>
    </ul>
</div>

replaceAll

replaceAllはreplaceWithと記述の仕方が逆になります。関数は指定できないみたいですね。以下は最初と同じで、#sampleの子要素pをh1に変更しています。

HTML

<div id="sample">
    <p>sample</p>
</div>

JavaScript

var sample = $('#sample p');
$('<h1>sample</h1>').replaceAll(sample);

見ての通り先程のreplaceWithとは逆で、置き換え後の要素を最初に記述して置き換え対象要素を引数に指定しています。

ということでこんな感じで手軽に色々と置き換えれるので使いやすいかと思います。

関連記事

  1. no-image

    JavaScript

    フルスクリーンによるjQueryモーダルウィンドウ実装「FullMod」

    FullModはフルスクリーンによるモーダルウィンドウを実装できるjQ…

  2. JavaScript

    タッチ、フリック、レスポンシブ対応のスライダーギャラリー「Flickity」

    Flickityはスマフォやタブレットに最適なタッチやフリック、または…

  3. JavaScript

    クールでお洒落なナビゲーションを簡単に実装できるjQueryプラグイン「Kwicks for jQu…

    クールでお洒落なナビゲーションを簡単に実装することができるjQuery…

  4. no-image

    JavaScript

    高さを揃えたレスポンシブな画像ギャラリー「jQuery Mosaic plugin」

    jQuery Mosaic pluginは高さを揃えたレスポンシブな画…

  5. PrognRoll

    JavaScript

    スクロールによるプログレスバーを表示できるjQueryプラグイン「PrognRoll」

    PrognRollはスクロールによるプログレスバーを表示することができ…

  6. no-image

    JavaScript

    プレーンなJavaScriptによるレスポンシブなLightbox「jsOnlyLightbox」

    jsOnlyLightboxは、jQueryなどを必要としないプレーン…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. リンツ リンドール
  2. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  3. ブラジルイパネマ

アーカイブ

PAGE TOP