リストの付与したデータを取得し、配列に入ったn番目の情報を取得したい。

###実現したいこと
以下のような、リストと配列があります。

■リスト

<ul class="list">
	<li data-category="1 2">果物</li>
	<li data-category="1 3 4">赤いもの</li>
	<li data-category="1 2 3">食べられるもの</li>
	<li data-category="4">食べられないもの</li>
</ul>

<div id="wrap">
 <ul>
 </ul>
</div>

■配列

        var arr = [
	        '<li>りんご</li>',
	        '<li>ばなな</li>',
	        '<li>トマト</li>',
	        '<li>郵便ポスト</li>'
        ]

リストをクリックした際に、リストのdata-categoryを取得し、data-categoryの中に入っているデータn番目の情報を#wrapのul内にappendしたいです。

###試したこと

var arr = [
	        '<li>りんご</li>',
	        '<li>ばなな</li>',
	        '<li>トマト</li>',
	        '<li>郵便ポスト</li>'
]
        
$('.list li').on('click',function(){
	var category = $(this).data('category');
	$.each(arr,function(i,ele){
	    $('#wrap').append(arr[category]);
	});
});

上記ですと、.list liに入っているデータが1つの場合は、正しく情報を取得できるのですが、複数入っている場合に、正しく情報が取ることができませんでした。

よろしくお願いいたします。

kei344

2017/04/23 09:14

変数「liarr」が定義されていませんが、転記する際に抜け落ちていませんか？

www-www

2017/04/23 09:26

ありがとうございます。また失礼いたしました。「liarr」ではなく「arr」でしたので、修正いたしました。

行動規範の内容に同意します

回答1件

ベストアンサー

たとえば。

HTML
1<ul class="list">
2	<li data-category="1 2">果物</li>
3	<li data-category="1 3 4">赤いもの</li>
4	<li data-category="1 2 3 9">食べられるもの</li>
5	<li data-category="4">食べられないもの</li>
6</ul>
7
8<div id="wrap">
9	<ul>
10	</ul>
11</div>

JavaScript
1var arr = [
2	'<li>りんご</li>',
3	'<li>ばなな</li>',
4	'<li>トマト</li>',
5	'<li>郵便ポスト</li>'
6]
7
8$( '.list li' ).on( 'click', function() {
9	var category = ( $( this ).data( 'category' ) + ' ' ).split( ' ' );
10	var l = arr.length;
11	$.each( category, function( i, ele ) {
12		if ( '' === ele || l < ele ) { return; }
13		$( '#wrap' ).append( arr[ ele - 1 ] );
14	} );
15} );
16```**動くサンプル：**[https://jsfiddle.net/98tLj67t/](https://jsfiddle.net/98tLj67t/)