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

JavaScript

jQuery(JavaScript)で指定した要素の子要素数や最大文字数を配列内から取得する

jQueryで指定した要素の子要素の数やその文字数、文字なんかを配列に格納して、その中の最大値を取得したいっていう時があるかもしれないですよね。で、色々調べてまとめてみたので今後のためにもメモしときます。覚えておいて損はないかと思います。ということで以下コードやら解説やらです。

[ads_center]

配列から色々な最大値を取得

まずはこんな感じのHTMLを作ってみます。適当ですいません。。

HTML

<div id="sample">
    <p>aaaaaaaaaaaa</p>
    <p>bbbbbbbbbbbbbbbbbbbbbb</p>
    <p>cccccc</p>
</div>

IDがsampleの子要素であるpの数を取得して配列に格納していきます。で、その中で最大の文字数や、その文字なんかを取り出します。

JavaScript

$(function(){
    var element = $('#sample');
    var elementChild = $(element).children('p');
    var elementChildNum = $(elementChild).length;
    var array1 = [];
    var array2 = [];

    for(var i = 0; i < elementChildNum; i++){
        array1.push($(elementChild).eq(i).text());
        array2.push(array1[i].length);
    }
    var aryNum = array2.indexOf(Math.max.apply(null,array2));
    var textNum = Math.max.apply(null, array2);
    var textMax = array1[aryNum];

    function br() {
        document.writeln('<br>');
    }

    document.writeln('文字を格納した配列(array1) = ' + array1);
    br();
    document.writeln('文字数を格納した配列(array2) = ' + array2);
    br();
    document.writeln('array2の最大値インデックス(aryNum) = ' + aryNum);
    br();
    document.writeln('array2の最大値(textNum) = ' + textNum);
    br();
    document.writeln('array1の最大値の文字(textMax) = ' + textMax);
});

実行結果はこんな感じになります。

実行結果

文字を格納した配列(array1) = aaaaaaaaaaaa,bbbbbbbbbbbbbbbbbbbbbb,cccccc 
文字数を格納した配列(array2) = 12,22,6 
array2の最大値インデックス(aryNum) = 1 
array2の最大値(textNum) = 22 
array1の最大値の文字(textMax) = bbbbbbbbbbbbbbbbbbbbbb

解説

まずは数を取得したい子要素の親要素のセレクタを変数elementに入れます。で、その子要素(p)をelementChild、その子要素の数をelementChildNumに代入します。

var element = $('#sample');
var elementChild = $(element).children('p');
var elementChildNum = $(elementChild).length;

次に文字を格納する配列(array1)と文字数を格納する配列(array2)を生成しておきます。

var array1 = []; // 文字の配列
var array2 = []; // 文字数の配列

上記の各配列にforを使ってelementChildの分だけ1つずつ取得して格納していきます。eq(i)を使えば指定したセレクタの中のi番目の要素を取得することができます。その要素の文字をtext()を使って取得してarray1にpushで追加していきます。

さらに、その追加したデータの文字数をlengthで取得して、array2の配列に入れていきます。

for(var i = 0; i < elementChildNum; i++){
    array1.push($(elementChild).eq(i).text());
    array2.push(array1[i].length);
}

あとは、array1とarray2から以下の3つのデータを取得します。

  1. 文字数が最大の配列インデックス
  2. 最大の文字数
  3. 最大の文字数の文字
var aryNum = array2.indexOf(Math.max.apply(null,array2)); // 文字数が最大の配列インデックス
var textNum = Math.max.apply(null, array2); // 最大の文字数
var textMax = array1[aryNum]; // 最大の文字数の文字

以下を参考にしました。ありがとうございます。

max.applyの第一引数に適当なものを置いて、第二引数に配列を指定すると、その最大値を取得することができるみたいです。

ということで、あまり解説になってないですが、配列内の色々な最大値の取得方法でした。

jQueryでウィンドウサイズによって処理を変えるjQueryでアニメーション動作中と停止中で処理を分ける:animatedと:not(:animated)を使ってみる前のページ

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

関連記事

  1. Data Img

    JavaScript

    ブラウザ幅に応じて画像を切り替えれるレスポンシブ対応のjQueryプラグイン「Data Img」

    Data Imgはブラウザ幅に応じて最適なサイズの画像を切り替えて表示…

  2. Flipster

    JavaScript

    レスポンシブ対応のシンプルなカルーセルを実装できるjQueryプラグイン「Flipster」

    レスポンシブにも対応しているシンプルなカルーセルを実装できるjQuer…

  3. no-image

    JavaScript

    テキストに応じてアンダーラインが伸び縮みする「Magic Line Menu」

    Magic Line Menuはナビゲーションメニューのテキストに応じ…

  4. JavaScript

    文章の段落にコメントできるjQueryプラグイン「SideComments.js」

    おもしろそうだったのでメモがてらご紹介。SideComments.js…

  5. JavaScript

    2つの異なるスクロール動作が印象的なjQueryプラグイン「multiscroll.js」

    multiscroll.jsというおもしろいjQueryプラグインがあ…

  6. jQuery toTop()

    JavaScript

    シンプル・軽量でカスタマイズもできる滑らかなスクロール「jQuery toTop()」

    jQuery toTop()はトップへ行くための滑らかなスクロールを実…

コメント

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

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

最近の記事

  1. COMOLI 和紙コットンリストバンド
  2. スターバックス インドネシア アチェ
  3. ベーコンとほうれん草のキッシュ
  4. サンクラフト ポテトング

アーカイブ

PAGE TOP