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. HTML5 Sortable

    JavaScript

    リストをドラッグ&ドロップで並べ替えることができるjQueryプラグイン「HTML5 So…

    リスト化した要素をドラッグ&ドロップで並べ替えることができるjQuer…

  2. tsorter

    JavaScript

    テーブルにソート(並べ替え)機能を実装できる「tsorter」

    tsorterは、JavaScriptを用いてHTMLテーブルにソート…

  3. notifier

    JavaScript

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

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

  4. JavaScript

    JavaScriptの関数のスコープについてちょっと確認してみる

    JavaScriptの関数のスコープを確認、整理する意味で記事にしてみ…

  5. ALighter

    JavaScript

    任意のテキストの場所に光を当ててくれるjQueryプラグイン「ALighter」

    ちょっとしたアクセントに使えそうですね。任意のテキストの場所に光を当て…

  6. Albe Timeline

    JavaScript

    JSONデータを用いたタイムライン実装「Albe Timeline」

    Albe TimelineはJSONデータを用いたカスタマイズ性の高い…

コメント

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

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

最近の記事

  1. Apple WatchでのMacロック解除を無効
  2. オータムスイートポテトフラペチーノ
  3. 紅葉
  4. ナノケア EH-NA0E
  5. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP