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. Scroll To Top Then Fixed Navigation Effect With jQuery and CSS
  2. CircularLoader.js

    JavaScript

    シンプルな円形プログレスバーを簡単に実装できる「CircularLoader.js」

    CircularLoader.jsは円形プログレスバーを簡単に実装する…

  3. Ideal Image Slider

    JavaScript

    シンプルで動きが滑らかなスライダー「Ideal Image Slider」

    Ideal Image Sliderはレスポンシブに対応したシンプルで…

  4. Section Scroller

    JavaScript

    セクションごとに自動でスクロールしてくれるボタン実装「Section Scroller」

    Section Scrollerは、セクションごとにスムーズにスクロー…

  5. trunk8

    JavaScript

    長い(はみ出した)テキストを「・・・」に置き換えてくれるjQueryプラグイン「trunk8」

    長いテキストやはみ出したテキストを「・・・」といった文字に置き換えてく…

コメント

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

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

最近の記事

  1. プラスシェル シティ04 フォールディングカメラケース
  2. enerpad AC-27KS
  3. KMS-160

アーカイブ

PAGE TOP