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. Bootstrap Show Password
  2. DD Scroll Boxes
  3. gridstack.js

    JavaScript

    ウィジェットレイアウトを作成できるjQueryプラグイン「gridstack.js」

    gridstack.jsはドラッグ&ドロップでウィジェットレイアウトを…

  4. jBox

    JavaScript

    ツールチップやモーダルウィンドウなどを実装できるjQueryプラグイン「jBox」

    jBoxはカスタマイズ性に優れたツールチップ、モーダルウィンドウ、通知…

  5. JavaScript

    Lightbox風のjQueryプラグインColorBoxの使い方

    綺麗なイメージギャラリーを簡単に設置できるColorBoxの使い方の紹…

  6. no-image

    JavaScript

    jQueryの代わりに使用できるマイクロJavaScriptライブラリ「Selector」

    Selectorは、jQueryの代わりに使用することができるマイクロ…

コメント

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

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

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP