ENTEREAL

まえがき

最近、ちょっとした処理でもJavaScriptではなく、jQueryで書く方が簡単だったりでこんな問題に出くわしました。

動的に取得したXMLデータの上位数件のみを対象に処理を行いたい場合。（例えば100件のリストの中から上位5件のみ取り出したい時）

var xmlListTop5 = "";                                       // ここに結果を格納したい
var loopCounter = 0;

$.ajax({
url:  'sample.xml',
type: 'get',
dataType: 'xml',
timeout: 1000,
success: function(xml){                                 // XML取得後の処理
$(xml).find('entry').each(function() {          // XMLのデータ(entry)件数ループ処理する
xmlListTop5 += $(this).find('項目名').text() + "
";
loopCounter ++;
if (loopCounter >= 5) {
    break;
}
});
}
});

JavaScriptのfor文をbreakで抜けるようなつもりで書いたのですがエラーになりました。

厳密にいうと、forやbreakはJavaScriptの処理で、eachはjQueryの機能という事でしょう。

解決策

そんな時に見つけたのが、jQueryの:ltセレクタです。見ての通り、「lt」は、英語の「less than」の略で、日本語で言うところの「未満」に当たるものです。詳細は本家サイトのドキュメントをご参照ください。

var xmlListTop5 = "";                                       // ここに結果を格納したい

$.ajax({
url:  'sample.xml',
type: 'get',
dataType: 'xml',
timeout: 1000,
success: function(xml){                                 // XML取得後の処理
$(xml).find('entry:lt(5)').each(function() {    // XMLのデータ(entry)の最初の5件数を処理する
xmlListTop5 += $(this).find('項目名').text() + "
";
});
}
});

.find('entry').each( ...としていた部分を.find('entry:lt(5)').each( ...とすることで、カウンターや判定処理を使わずに実現が出来ます。

※ 判定に使われるインデックス値は0スタートの番号です。

反対に:gt()は、より多いとなります。

複雑な条件を作ることはできませんが、上位や下位のみ処理したい場合には重宝します。