20140228【JS】jQueryで要素に対する繰り返し処理を行う
お題
jQueryで要素に対する繰り返し処理を行う
プログラム概要
jQueryのget()、each()、map()メソッドによる繰り返し処理で要素を取得し
値を表示する
ソース
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>hoge</title>
<script src="jquery-1.11.0.js"></script>
<body>
<ul id="hp">
<li data-category="hg">hoge1</li>
<li data-category="hg">hoge2</li>
<li data-category="py">piyo1</li>
<li data-category="py">piyo2</li>
</ul>
<script>
$(function(){
var elements = $('li');
// lengthプロパティとget()メソッドによる繰り返し処理
console.log('-- lengthプロパティとget()メソッドによる繰り返し処理 --');
for(var i = 0; i < elements.length; i++){
console.log(i + ': ' + $(elements.get(i)).text());
}
// eachメソッドによる繰り返し処理
console.log('-- each()メソッドによる繰り返し処理 --')
$(elements).each(function(i, e){
console.log(i + ': ' + $(elements.get(i)).text());
// 3個目で処理を終了
if(i == 2){
return false;
}
});
// map()メソッドによる繰り返し処理
console.log('-- map()メソッドによる繰り返し処理 --')
var categories = $(elements).map(function(i, e){
return $(e).data('category');
});
console.log(categories.get().join(', '));
});
</script>
</body>
</html>
実行結果
-- lengthプロパティとget()メソッドによる繰り返し処理 -- 0: hoge1 1: hoge2 2: piyo1 3: piyo2 -- each()メソッドによる繰り返し処理 -- 0: hoge1 1: hoge2 2: piyo1 -- map()メソッドによる繰り返し処理 -- hg, hg, py, py
