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の第一引数に適当なものを置いて、第二引数に配列を指定すると、その最大値を取得することができるみたいです。

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

関連記事

  1. Zooming

    JavaScript

    クールな画像ズーム機能を実装できる「Zooming」

    Zoomingはクールでかっこいい画像ズーム機能を実装することができる…

  2. Pongstagr.am

    JavaScript

    自分のインスタグラムの画像を表示できるjQueryプラグイン「Pongstagr.am」

    Pongstagr.amは自分のインスタグラムの画像をWebサイトに表…

  3. JavaScript

    縦スクロールすると横スクロール(水平移動)していくjQueryプラグイン「jInvertScroll…

    これおもしろいですね。縦スクロールすると垂直に移動していくのではなくて…

  4. jQuery Sequency js

    JavaScript

    スクロールでビフォー・アフター画像を見比べれる「jQuery Sequency js」

    jQuery Sequency jsはスクロールでビフォー・アフター画…

  5. JavaScript

    画像を素敵なアニメーションで次々に表示させるjQueryのイメージギャラリー「Heap Shot」

    とても素敵な画像の見せ方だったのでご紹介します。jQueryプラグイン…

  6. JavaScript

    ボタンやアイコンに素敵なクリックエフェクトを実装できる「Waves」

    ボタンやアイコンに素敵なクリックエフェクトを実装することができる「Wa…

コメント

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

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

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP