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とは逆で、置き換え後の要素を最初に記述して置き換え対象要素を引数に指定しています。

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

CSS3のtransformを使えば要素を全体的に拡大するやつはめっちゃ簡単にできた前のページ

WordPressでシェアする為のプラグインベスト10次のページ

関連記事

  1. busy-load

    JavaScript

    シンプルでフレキシブルなローディングマスクプラグイン「busy-load」

    busy-loadはシンプルでフレキシブルなローディングマスクを実装す…

  2. ScrollTrigger

    JavaScript

    スクロールの位置をベースにしたアニメーション「ScrollTrigger」

    ScrollTriggerはユーザーがスクロールする位置をベースにした…

  3. Sticky Sidebar

    JavaScript

    スマートでハイパフォーマンスな追尾型サイドバー実装「Sticky Sidebar」

    Sticky Sidebarは、スマートでハイパフォーマンスな追尾型サ…

  4. bootstrap-wysihtml5

    JavaScript

    シンプルで美しいWYSIWYGエディタを実装できる「bootstrap-wysihtml5」

    bootstrap-wysihtml5はシンプルでスッキリしたデザイン…

  5. PhotoSwipe

    JavaScript

    タッチジェスチャーにも対応したイメージギャラリー・PhotoSwipe

    PhotoSwipeはスマホやタブレットのタッチジェスチャーにも対応し…

  6. notifier

    JavaScript

    Webサイトにシンプルな通知を表示させるjQueryプラグイン「notifier」

    notifierはWebサイトにシンプルな通知を表示させることができる…

コメント

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

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

最近の記事

  1. 冬用のふとん
  2. 田沢湖
  3. ゴムの耳栓
  4. ライオンコーヒー(バニラマカダミア)
PAGE TOP