bl6.jp

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]; // 最大の文字数の文字

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

【Javascript】配列の値の中から、最大値、最小値を求める（配列を引数に展開する）

javascriptで、配列の最大値のキーを取得するコードの書き方を教.. – 人力検索はてな

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

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