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. HR Navigation Responsive Menu
  2. WebSnowjq.js

    JavaScript

    Webページに雪を降らせてくれるjQueryプラグイン「WebSnowjq.js」

    WebSnowjq.jsはWebページの中に雪を降らせることができるj…

  3. Rollerblade.js

    JavaScript

    画像を360度回転させて見せることができるjQueryプラグイン「Rollerblade.js」

    Rollerblade.jsというjQueryプラグインを使えば、画像…

  4. underline.js

    JavaScript

    遊び心あるアニメーションと美しさを追求したアンダーライン「underline.js」

    underline.jsはアニメーションが付いた美しいアンダーラインを…

  5. imagelightbox

    JavaScript

    レスポンシブ対応でタッチフレンドリーな画像ギャラリー「imagelightbox」

    imagelightboxは、レスポンシブに対応したタッチフレンドリー…

  6. JavaScript

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

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

コメント

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

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

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP