Q&A
０から始まって3番目の文字列を削除するのでしょうか？
「ニーズ」ではじまる文字を削除するのでしょうか？
お世話になります。
jquery.csv.jsでcsvデータを取得し、配列に格納した後、カテゴリ別に用意したSlickのスライダー内に格納する処理を行っています。
現状は、sliderInit();で書き出したあとに不要な項目をremoveで削除していますが、
配列内のn番目（例えばCSVのニーズXXの部分のみ除外）のみ除外してslick内に格納する方法がありましたら教えていただきたいです。
また、その際に書き出し後にaddClassの指定をするのではなく、<li>にappendする前にclassの指定をする方法があれば合わせて教えていただければと思います。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<!-- layout --> 4<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"> 5<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"> 6 7<!-- js --> 8<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> 9<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 10<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.21/jquery.csv.min.js"></script> 11<script type="text/javascript" src="./js/slick_test.js"></script> 12</head> 13 14<body> 15 <div id="bio" class="slick_box"> 16 <ul class="slider"> 17 </ul> 18 </div> 19 <div id="re" class="slick_box"> 20 <ul class="slider"> 21 </ul> 22 </div> 23 <div id="other" class="slick_box"> 24 <ul class="slider"> 25 </ul> 26 </div> 27</body> 28</html>
javascript
1// JavaScript Document 2$(function(){ 3 //slider 4 function sliderInit(){ 5 $(".slider").slick({ 6 autoplay: false, 7 dots: false, 8 arrows:true, 9 centerMode: true, 10 centerPadding: '10%', 11 slidesToShow: 1, 12 slidesToScroll: 1 13 }); 14 } 15 16 //CSV取得 17 function readCsv(data) { 18 var csv = $.csv.toArrays(data); 19 $('.slick_box').each(function() { 20 const categoryId = $(this).attr('id'); 21 const rows = csv.filter(([category]) => category === `${categoryId}`); 22 const items = rows.map(values => 23 $('<li>').append(values.map(v => $('<div>').text(v))) 24 ); 25 $('.slider', this).append(items); 26 }); 27 sliderInit(); 28 29 //insetClass クラス付与 30 $('.slick-slide').each(function(){ 31 $(this).children('div').eq(2).remove(); //配列n個目削除 32 const insetClass = ['xxx', 'yyy', 'zzz']; 33 for (let i=0; i<insetClass.length; i++){ 34 const val = insetClass[i] 35 $(this).children('div').eq(i).addClass(val); 36 } 37 }); 38 } 39 var csvfile = 'data/case_bio.csv'; 40 $(function(){ 41 $.get(csvfile, readCsv, 'text'); 42 }); 43}); 44
csv
1bio,01,見出し01,ニーズ01,アプローチ01,成果物01 2bio,02,見出し02,ニーズ02,アプローチ02,成果物02 3bio,03,見出し03,ニーズ03,アプローチ03,成果物03 4re,01,見出し04,ニーズ04,アプローチ04,成果物04 5re,02,見出し05,ニーズ05,アプローチ05,成果物05 6re,03,見出し06,ニーズ06,アプローチ06,成果物06 7other,01,見出し07,ニーズ07,アプローチ07,成果物07 8other,02,見出し08,ニーズ08,アプローチ08,成果物08 9other,03,見出し09,ニーズ09,アプローチ09,成果物09
質問がわかりづらくて申し訳ありません。
前者で、3番目（n番目）の文字列を削除したいです。
現状 sliderInit();まで実行した結果
<li>
<div>bio</div>
<div>01</div>
<div>見出し01</div>
<div>ニーズ01</div>
<div>アプローチ01</div>
<div>成果物01</div>
</li>
︙
となっているかと思いますが
<li>
<div class="xxx">bio</div>
<div class="yyy">01</div>
<div class="zzz">見出し01</div>
<div>アプローチ01</div>
<div>成果物01</div>
</li>
︙
このようにしたいと考えています。
回答1件
0
ベストアンサー
javascript
1 $.get(csvfile, function(data){ 2 $.csv.toArrays(data).forEach(function(x){ 3 $('#'+x[0]+' .slider').append($('<li>').append( 4 x.map(function(y,z){ 5 return z==3?false:$('<div>').text(y); 6 }))); 7 }); 8 });
投稿2021/10/11 04:36
編集2021/10/11 06:11総合スコア115012
ありがとうございます。
そのままですとうまく動作できなかったため、一部流用させていただいたところ想定通りの挙動となりました。
ありがとうございます。
-------------------
function readCsv(data) {
var csv = $.csv.toArrays(data);
$('.slick_box').each(function() {
const categoryId = $(this).attr('id');
const rows = csv.filter(([category]) => category === `${categoryId}`);
const items = rows.map(values =>
$('<li>').append(values.map(function(y,z){
return z==3?false:$('<div>').text(y); //不要部分の削除
}))
);
$('.slider', this).append(items);
});
sliderInit();
//insetClass
$('.slick-slide').each(function(){
const insetClass = ['xxx', 'yyy', 'zzz'];
for (let i=0; i<insetClass.length; i++){
const val = insetClass[i]
$(this).children('div').eq(i).addClass(val);
}
});
}
var csvfile = 'data/case_bio.csv';
$(function(){
$.get(csvfile, readCsv, 'text');
});
-------------------
あなたの回答
tips
プレビュー
