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

JavaScript

jQueryで$.inArrayを使えば配列の中に指定した値が何番目に入ってるか知ることができる

jQueryで配列の中に自分が指定した値が何番目にあるか知りたい場合は$.inArrayを使えば知ることができます。使い方は簡単で、$.inArrayの第一引数に探したい値を指定して、第二引数に探し出す配列を指定するだけです。これで第一引数に、指定した値が入っているインデックスが返ってきます。わざわざforやらを使って調べなくてもいいので便利ですね。

[ads_center]

$.inArray()

以下、具体的な使い方のコードです。

arr = ["aaa", "bbb", "ccc"];
var i = $.inArray("bbb", arr);
document.writeln(i);

// 実行結果 1

こんな感じで使います。

もう少しだけ実用性を持たせてみます。以下はsampleというクラス名がついている要素を1つずつ配列に入れ、その中から「テキスト3」と書かれた要素のテキストを「ここを指定しました」と置き換えてみるサンプルです。

HTML

<p class="sample">テキスト1</p>
<p class="sample">テキスト2</p>
<p class="sample">テキスト3</p>
<p class="sample">テキスト4</p>
<p class="sample">テキスト5</p>

JavaScript

var n = $('.sample');
var arr = [];
var num = n.length;
for(var i = 0; i < num; i++){
    arr.push($(n[i]).text());
}
var j = $.inArray("テキスト3", arr);
$(n[j]).text("ここを指定しました");

// 実行結果
<p class="sample">テキスト1</p>
<p class="sample">テキスト2</p>
<p class="sample">ここを指定しました</p>
<p class="sample">テキスト4</p>
<p class="sample">テキスト5</p>

ということで、これだけだとあまり実用性が感じられないかもしれませんが、色々組み合わせていくことで少しは活躍するんじゃないかなと思いました。

jQueryでウィンドウサイズによって処理を変えるjQueryのeachと$.eachの簡単な使い方のメモ前のページ

WordPressでカスタムフィールドを使って任意のコードやファイルをhead内に読み込ませる次のページ

関連記事

  1. no-image

    JavaScript

    さまざまなSVGパターンによるCSSプログレスバー「Bars」

    Barsはさまざまな種類のSVGパターンによるCSSプログレスバーを実…

  2. Text Scramble Effect

    JavaScript

    テキストをスクランブルしながら表示していく「Text Scramble Effect」

    Text Scramble Effectはテキストをカシャカシャとスク…

  3. mmenu

    JavaScript

    スマホアプリのように横からスライドするメニューのjQueryプラグイン「mmenu」

    mmenuというjQueryプラグインを使えば、スマホアプリのように横…

  4. Before and after slider
  5. no-image

    JavaScript

    スワイプでのスライドもできるシンプルなスライダー「jquery-slide」

    jquery-slideはスワイプでのスライドにも対応したシンプルなス…

  6. MediumLightbox

    JavaScript

    Mediumライクな画像ズームを実装できる「MediumLightbox」

    シンプルでエレガントな画像ズーム機能をwebサイトに実装できる「Med…

コメント

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

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

最近の記事

  1. Aモーニングセット
  2. 白トリュフの塩パンやメロンパンなど
  3. 東京都現代美術館
  4. スーリア バターチキン
  5. そそそ 明太クリームそうめん

アーカイブ

PAGE TOP