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. Tilt.js

    JavaScript

    パララックスとチルトを兼ね備えたホバーエフェクト実装「Tilt.js」

    Tilt.jsはパララックスとチルトの動きを兼ね備えた滑らかなホバーエ…

  2. Bootstrap Carousel Touch Slider with Text Animation
  3. Albe Timeline

    JavaScript

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

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

  4. JavaScript

    ニュースやお知らせなどに使えるティッカー「jQuery WebTicker」

    ニュースやお知らせなんかに使えるティッカー「jQuery WebTic…

  5. Pilpil

    JavaScript

    プログレッシブ形式で画像表示時間を短縮してくれる「Pilpil」

    Pilpilは、ページの画像表示の時間を短縮するためのJSライブラリで…

  6. simplePagination.js

コメント

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

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

最近の記事

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

アーカイブ

PAGE TOP