Q&A
jQuery以外にも使ってるライブラリ、プラグインがあるのでしたらご提示ください。
可能な限りコピペで再現できるように。
※http下でないと動かないはずなのでその辺も配慮いただけたらと
お世話になります。
外部CSVデータを読み取り、カテゴリごとに別けてslickに書き出すという処理をしております。
その際、CSVを書き出すときに同じ処理を繰り返し記述しています。
この処理をスマートに出来ないでしょうか？
html
1<head> 2<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"> 3<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"> 4 5<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> 6<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 7<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.21/jquery.csv.min.js"></script> 8</head> 9 10<body> 11 <div id="slick_1" class="slick_box"> 12 <ul class="slider"> 13 </ul> 14 </div> 15 <div id="slick_2" class="slick_box"> 16 <ul class="slider"> 17 </ul> 18 </div> 19 <div id="slick_3" class="slick_box"> 20 <ul class="slider"> 21 </ul> 22 </div> 23</body>
Javascript
1$(function(){ 2 //slider 3 function sliderInit(){ 4 $(".slider").slick({ 5 autoplay: false, 6 dots: false, 7 arrows:true, 8 centerMode: true, 9 centerPadding: '10%', 10 slidesToShow: 1, 11 slidesToScroll: 1 12 }); 13 } 14 15 //CSV書き出し 16 function readCsv(data) { 17 var csv = $.csv.toArrays(data); 18 var insert_1 = ''; 19 var insert_2 = ''; 20 var insert_3 = ''; 21 $(csv).each(function() { 22 if (this.length > 0 && this[0] === 'カテゴリ1') { 23// insert_1 += '<li>'; 24 insert_1 += '<div>' + this[0] + '</div>'; 25 insert_1 += '<div>' + this[1] + '</div>'; 26 insert_1 += '<div>' + this[2] + '</div>'; 27 insert_1 += '<div>' + this[3] + '</div>'; 28 insert_1 += '<div>' + this[4] + '</div>'; 29 insert_1 += '<div>' + this[5] + '</div>'; 30 insert_1 += '</li>'; 31 } else if (this.length > 0 && this[0] === 'カテゴリ2') { 32 insert_2 += '<li>'; 33 insert_2 += '<div>' + this[0] + '</div>'; 34 insert_2 += '<div>' + this[1] + '</div>'; 35 insert_2 += '<div>' + this[2] + '</div>'; 36 insert_2 += '<div>' + this[3] + '</div>'; 37 insert_2 += '<div>' + this[4] + '</div>'; 38 insert_2 += '<div>' + this[5] + '</div>'; 39 insert_2 += '</li>'; 40 } else if (this.length > 0 && this[0] === 'カテゴリ3') { 41 insert_3 += '<li>'; 42 insert_3 += '<div>' + this[0] + '</div>'; 43 insert_3 += '<div>' + this[1] + '</div>'; 44 insert_3 += '<div>' + this[2] + '</div>'; 45 insert_3 += '<div>' + this[3] + '</div>'; 46 insert_3 += '<div>' + this[4] + '</div>'; 47 insert_3 += '<div>' + this[5] + '</div>'; 48 insert_3 += '</li>'; 49 } else{ 50 return false; 51 } 52 }); 53 $('#slick_1 .slider').append(insert_1); 54 $('#slick_2 .slider').append(insert_2); 55 $('#slick_3 .slider').append(insert_3); 56 sliderInit(); 57 58 } 59 var csvfile = 'data/case_bio.csv'; 60 $(function(){ 61 $.get(csvfile, readCsv, 'text'); 62 }); 63});
csv
1カテゴリ1,01,見出し01,ニーズ01,アプローチ01,成果物01 2カテゴリ1,02,見出し02,ニーズ02,アプローチ02,成果物02 3カテゴリ1,03,見出し03,ニーズ03,アプローチ03,成果物03 4カテゴリ2,01,見出し01,ニーズ01,アプローチ01,成果物01 5カテゴリ2,02,見出し02,ニーズ02,アプローチ02,成果物02 6カテゴリ2,03,見出し03,ニーズ03,アプローチ03,成果物03 7カテゴリ3,01,見出し01,ニーズ01,アプローチ01,成果物01 8カテゴリ3,02,見出し02,ニーズ02,アプローチ02,成果物02 9カテゴリ3,03,見出し03,ニーズ03,アプローチ03,成果物03
回答3件
0
ベストアンサー
こんなんで、どないでっか？
diff
1 //CSV書き出し 2 function readCsv(data) { 3 var csv = $.csv.toArrays(data); 4- var insert_1 = ''; 5- var insert_2 = ''; 6- var insert_3 = ''; 7- $(csv).each(function() { 8- if (this.length > 0 && this[0] === 'カテゴリ1') { 9- insert_1 += '<li>'; 10- insert_1 += '<div>' + this[0] + '</div>'; 11- insert_1 += '<div>' + this[1] + '</div>'; 12- insert_1 += '<div>' + this[2] + '</div>'; 13- insert_1 += '<div>' + this[3] + '</div>'; 14- insert_1 += '<div>' + this[4] + '</div>'; 15- insert_1 += '<div>' + this[5] + '</div>'; 16- insert_1 += '</li>'; 17- } else if (this.length > 0 && this[0] === 'カテゴリ2') { 18- insert_2 += '<li>'; 19- insert_2 += '<div>' + this[0] + '</div>'; 20- insert_2 += '<div>' + this[1] + '</div>'; 21- insert_2 += '<div>' + this[2] + '</div>'; 22- insert_2 += '<div>' + this[3] + '</div>'; 23- insert_2 += '<div>' + this[4] + '</div>'; 24- insert_2 += '<div>' + this[5] + '</div>'; 25- insert_2 += '</li>'; 26- } else if (this.length > 0 && this[0] === 'カテゴリ3') { 27- insert_3 += '<li>'; 28- insert_3 += '<div>' + this[0] + '</div>'; 29- insert_3 += '<div>' + this[1] + '</div>'; 30- insert_3 += '<div>' + this[2] + '</div>'; 31- insert_3 += '<div>' + this[3] + '</div>'; 32- insert_3 += '<div>' + this[4] + '</div>'; 33- insert_3 += '<div>' + this[5] + '</div>'; 34- insert_3 += '</li>'; 35- } else{ 36- return false; 37- } 38- }); 39- $('#slick_1 .slider').append(insert_1); 40- $('#slick_2 .slider').append(insert_2); 41- $('#slick_3 .slider').append(insert_3); 42+ $('.slick_box').each(function() { 43+ const categoryId = $(this).attr('id').replace('slick_', ''); 44+ const rows = csv.filter(([category]) => category === `カテゴリ${categoryId}`); 45+ const items = rows.map(values => 46+ $('<li>').append(values.map(v => $('<div>').text(v))) 47+ ); 48+ $('.slider', this).append(items); 49+ }); 50 sliderInit(); 51 }
投稿2021/10/08 00:51
編集2021/10/11 05:18
退会済みユーザー
総合スコア0
ありがとうございます。ここまで短くできることに驚きました。
不勉強でmapやアロー関数の使い方が全くわからないので、これを期に使い方を勉強したいと思います。
重ねての質問で申し訳ないのですが
もし可能であれば、
①カテゴリ名が文字列の場合（カテゴリ名＝slickのID名）の対応方法
②$('<div>')の各項目ごとのクラス指定をする方法
※各<li>内のn番目の<div>は同一のクラスになる感じです。
③配列のn番目を飛ばすさせない方法
を教えていただければ幸いです。
既に退会されたようなので何もレスポンスないかと。
回答内容消して退会したので非常にたちの悪い行為です。
そのようですね、教えていただきありがとうございます。
0
コピペで現状再現できないので未検証ですし、ループばかりでお世辞にも（パフォーマンス的に）スマートとは言えませんが、数字が固定のようなので見た目短くするのは難しくはないです。
js
1const list = [1,2,3] 2 3 4$insert = []; 5for (i of list) { //初期化 6 $insert[i] = ''; 7} 8$(csv).each(function () { 9 if (this.length === 0) { 10 return true; 11 } 12 for (i of list) { 13 if (this[0] === 'カテゴリ' + i) { 14 $insert[i] += '<li>'; 15 for (this_i = 0; this_i <=5; this_i++) { 16 $insert[i] += '<div>' + this[this_i] + '</div>'; 17 } 18 $insert[i] += '</li>'; 19 } 20 } 21}); 22for (i of list) { 23 $('#slick_' + i + ' .slider').append($insert[i]); 24}
もしくは「カテゴリn」と捉えて
js
1$insert = []; 2$(csv).each(function() { 3 if(this.length === 0){ 4 return true; 5 } 6 num = this[0].replace('カテゴリ',''); 7 if(!$insert.indexOf(num)){ 8 $insert[num] = ''; 9 } 10 $insert[num] += '<li>'; 11 for (this_i = 0; this_i <= 5; this_i++) { 12 $insert[num] += '<div>' + this[this_i] + '</div>'; 13 } 14 $insert[num] += '</li>'; 15}); 16 17for(i in $insert){ 18 $('#slick_'+i+' .slider').append($insert[i]); 19}
投稿2021/10/07 21:34
編集2021/10/07 21:57総合スコア80875
0
BAをつけさせていただいた方が回答を消されてしまったので、頂いた回答を転記させていただきます。
JavaScript
1 //CSV書き出し 2 function readCsv(data) { 3 var csv = $.csv.toArrays(data); 4 $('.slick_box').each(function() { 5 const categoryId = $(this).attr('id').replace('slick_', ''); 6 const rows = csv.filter(([category]) => category === `カテゴリ${categoryId}`); 7 const items = rows.map(values => 8 $('<li>').append(values.map(v => $('<div>').text(v))) 9 ); 10 $('.slider', this).append(items); 11 }); 12 sliderInit(); 13 } 14 var csvfile = 'data/case_bio.csv'; 15 $(function(){ 16 $.get(csvfile, readCsv, 'text'); 17 }); 18
投稿2021/10/09 12:55
編集2021/10/09 14:09総合スコア4
あなたの回答
tips
プレビュー
