jQuery: テキストの内容によって、データ属性に値（複数）を追加したい

Question

テキストの内容によって、データ属性に値（複数）を追加したいです。

追加する場所は、data-filterです。
デフォルトで、 #a-1, #b-1 という値が入っており、ここにさらに、下記のような条件にて値を追加したいです。
(サービスと要望は毎回、各1こずつ追加されます。なので、常に下記のような形になります。)

<div class="list col" data-filter='["#a-1", "#b-1"]'>

赤くしたい　という文字列が含まれている場合は、"#a-2"を追加
丈夫にしたい　という文字列が含まれている場合は、"#a-3"を追加
塗装　という文字列が含まれている場合は、"#b-2"を追加
建築　という文字列が含まれている場合は、"#b-3"を追加

現在、

console.log($('.list.col').data('filter'));

の値を見てみると、
確かに　#a-数字 のフォーマットでdata-filter が形成されてはいるようです。

しかし、上記の作り出した　data-filter は、実際に現在のhtmlにある data-filter に追加されません。

試みたことでは、

$('.list.col').data('filter', '#a-' + index_number);

と書けば、data-filter に値をセットできると思ったのですが、
追加されていませんでした。

どのようにすれば、作り出した data-filter の値を追加することが出来るでしょうか。

<!-- html -->

<div id="js-casestudy">
	<div class="list col" data-filter='["#a-1", "#b-1"]'>
		<div class="entry">			
			<div class="attribute">
				<dl>
					<dt>サービス</dt>
					<dd class="case_service">塗装</dd>
				</dl>
				<dl>
					<dt>要望</dt>
					<dd class="case_request">赤くしたい</dd>
				</dl>
			</div>
		</div>		
	</div>
	<div class="list col" data-filter='["#a-1", "#b-1"]'>
		<div class="entry">			
			<div class="attribute">
				<dl>
					<dt>サービス</dt>
					<dd class="case_service">建築</dd>
				</dl>
				<dl>
					<dt>要望</dt>
					<dd class="case_request">丈夫にしたい</dd>
				</dl>
			</div>
		</div>		
	</div>	
</div>

// jQuery

$(function() {


     $('#js-casestudy .list').each(function(){

        var request_list = ['赤くしたい', '丈夫にしたい', '転居したい'];
        var request = $('.attribute dl dd.case_request').text();

        var service_list = ['塗装', '建築', '引っ越し', '清掃'];
        var service = $('.attribute dl dd.case_service').text();

        var req = request_list.length;
        var serv = service_list.length;

        while (req--) {
          if (request.indexOf(request_list[req]) !== -1) {    

              var index_number = (request_list).indexOf(request_list[req]) + 2;      
              $('.list.col').data('filter', '#a-' + index_number);

              console.log($('.list.col').data('filter'));
          }
        }
        while (serv--) {
          if (service.indexOf(service_list[serv]) !== -1) {

              var index_number = (service_list).indexOf(service_list[serv]) + 2;        
              $('.list.col').data('filter', '#b-' + index_number);

              console.log($('.list.col').data('filter'));
          }
        }
    })

});

Comments

[x_x]

#a-2 ですか？
提示のコードでは最終的に "#b-2" となるのではないでしょうか？

[vankick]

最終的には、
1つ目の .list は、
<div class="list col" data-filter='["#a-1", "#a-2", "#b-1", "#b-2"]'>

2つ目の .list は、
<div class="list col" data-filter='["#a-1", "#a-3", "#b-1", "#b-3"]'>

となるはずでした。

Answer 1

jQuery の .data() は独自にデータを持つことになるので、インスペクタから見たいのであれば .attr() にします。
https://api.jquery.com/data/#data1

Using the data() method to update data does not affect attributes in the DOM. To set a data-* attribute value, use attr.

.list が複数あるので不必要なところを変更しないように注意

        //var request = $('.attribute dl dd.case_request').text();
        var request = $('.attribute dl dd.case_request', this).text();

service も同様。

              //$('.list.col').data('filter', '#a-' + index_number);
              var filter = JSON.parse($(this).attr('data-filter') || '[]');
              filter.push('#a-' + index_number);
              $(this).attr('data-filter', JSON.stringify(filter));

Comments

[vankick]

ありがとうございます、思っていた通りの動きになりました。魔法のようです。
頂いたコメントをよく読んでみます。
ありがとうございました！

Answer 2

data-filter の値を追加

jQueryの解釈の問題ですね
カスタムデータ内のjson配列を配列として変換してくれる仕様のようです
配列なのでpushすれば追加できます

<script>
$(function(){
  $('.list.col').data('filter').push("#c-2");
  $('.list.col').data('filter').push("#b-1");
  console.log($('.list.col').data('filter'));
});
</script>
<div class="list col" data-filter='["#a-1","#b-1"]'></div>

しかし、setと違ってclassのようにユニークな処理はしてくれませんので注意

生のjsでやるならJSON.parse/JSON.strigifyを駆使してください

調整版

<script>
$.fn.dataAdd=function(x,y){
  if(typeof $(this).data(x)== "undefined"){
    $(this).data(x,y);
  }else if(typeof $(this).data(x)== "string"){
    $(this).data(x,[$(this).data(x),y]);
  }else{
     $(this).data(x).push(y);
  }
}
$.fn.dataDel=function(x,y){
  if(typeof y== "undefined"){
    $(this).removeData(x);
  }
  if(typeof $(this).data(x)== "string" && $(this).data(x)==y){
    $(this).removeData(x);
  }
  if($(this).data(x) instanceof Array){
    $(this).data(x,$(this).data(x).filter(z=>z!==y));
    if($(this).data(x).length==0) $(this).removeData(x);
  }
}
$(function(){
  console.log($('.list.col').data('filter'));
  $('.list.col').dataAdd('filter','#a-1');
  console.log($('.list.col').data('filter'));
  $('.list.col').dataAdd('filter','#b-1');
  console.log($('.list.col').data('filter'));
  $('.list.col').dataDel('filter','#b-1');
  console.log($('.list.col').data('filter'));
  $('.list.col').dataDel('filter','#a-1');
  console.log($('.list.col').data('filter'));
});
</script>
<div class="list col"></div>

Comments

[vankick]

ありがとうございます。

ですが、console.log($.type($('.list.col').data('filter'))) をすると、stringと判定されていました。

$('.list.col').data('filter').push('#a-' + index_number); と書くと、
$(...).data(...).push is not a function というエラーも出てしまいました。

[yambejp]

当初1個しかなければ元が文字列なので追加するには
適当なキャスト処理が必要でしょう
(調整版追記しておきました、del処理も追記してあります)

[vankick]

ありがとうございます！