jQueryで複数のdatasetが設定された属性の取得方法

Question

うまく検索できなかったので、こちらで質問させてください……
(不十分かもしれませんが、丸投げではないアピールです)

今、htmlの構成は、下記のようになっています。

<ul>
  <li data-a="データA", data-b="データ1", data-c="データX"></li>
  <li data-a="データA", data-b="データ2", data-c="データY"></li>
  <li data-a="データA", data-b="データ3", data-c="データZ"></li>
</ul>

このとき、

data-a の属性が データA かつ
data-b の属性が データ1 の場合の、
data-c の属性を取得 (=ここでは、"データX")

したいのですが、jQueryを使用して、どのように記述すればいいですか？

ご教示のほど、よろしくお願いいたします。

Answer 1

属性セレクタ (Attribute selectors)

解決していますが、別解を。

• 属性セレクタのAND検索 - JSFiddle

'use strict';
console.log(jQuery('[data-a="データA"][data-b="データ1"]').map((i, element) => element.dataset.c));
console.log(Array.prototype.map.call(jQuery('[data-a="データA"][data-b="データ1"]'), element => element.dataset.c));

セレクタについて勉強すると、コーディングの幅が広がります。

• 6. 属性選択子 - Selectors Level 4 （日本語訳）

jQuery#attr()

jQuery#attr() はインデックス0の属性値を返すので、先頭の要素の属性が欲しいのなら、attr() で十分といえます。

console.log(jQuery('[data-a="データA"][data-b="データ1"]').attr('data-c'));

アロー関数

コード中、"=>"がどこを指しているのか、何の処理を行っているのかがよく分かりません。

=> はアロー関数の一部です。

• アロー関数 - JavaScript | MDN

先述のコードを「アロー関数」から通常の「関数式」に変更すると、次のコードになります。

'use strict';
console.log(jQuery('[data-a="データA"][data-b="データ1"]').map(function (i, element) { return element.dataset.c}));
console.log(Array.prototype.map.call(jQuery('[data-a="データA"][data-b="データ1"]'), function (element) { return element.dataset.c }));

Re: icicle さん

Comments

[退会済みユーザー]

前回に引き続き、回答ありがとうございます。

セレクタについて、簡単に調べてみましたが、申し訳ありません。
コード中、"=>"がどこを指しているのか、何の処理を行っているのかがよく分かりません。
追加の質問となりますが、ご教示いただけると助かります。

[think49]

> コード中、"=>"がどこを指しているのか、何の処理を行っているのかがよく分かりません。
それは「アロー関数」というものです。
attr() にも触れて、親記事に追記しておきました。

[退会済みユーザー]

追加の解説ありがとうございました。セレクタとは似て非なるものだったんですね……
関数式で説明されるとすんなり理解できました。とても分かりやすいです。
Array.prototypeも初耳でした。ここまで柔軟に書かれるとRubyを彷彿としてしまいます(？)

Answer 2

条件に合致するものが必ずしも１つとは限りませんので注意が必要です

<ul>
  <li data-a="データA" data-b="データ1" data-c="データX"></li>
  <li data-a="データA" data-b="データ2" data-c="データY"></li>
  <li data-a="データA" data-b="データ3" data-c="データZ"></li>
  <li data-a="データA" data-b="データ1" data-c="データX2"></li>
</ul>

だとして、こうするとよいでしょう

とりあえず、なにか1個ヒットすればいい場合

$(function(){
  var data_c=$('*').filter(function(){
      return $(this).data('a')=="データA" && $(this).data('b')=="データ1";
    }).data('c');
  console.log(data_c);
});

全部取得する場合

$(function(){
  var data_c=$.map(
    $('*').filter(function(){
      return $(this).data('a')=="データA" && $(this).data('b')=="データ1";
    }),function(x){
      return x.getAttribute('data-c');
    });
  console.log(data_c);
});

Comments

[退会済みユーザー]

"全部取得する場合"のコードを解読してました。
$.map(array, callback(value, index))の構文を使ってると考えると、
arrayに当たるのが$('*').filter(function(){…})の部分で、
callback(value, index)に当たるのが、function(x){…}の部分ですよね。

arrayのほうでdatasetが'a'=="データA"の場合かつdatasetが'b'=="データ1"の場合を
配列としてすべて取得して、filter(fn)で条件に当てはまらない要素を削除して……
callback(value)に当たる部分、つまりxに取得した配列の先頭の要素が入って、
data-cの属性を取得して変数data_cに配列として返してるのかな……

間違えてたらすみません(´・ω・`)

Answer 3

$( function() {
	let arr = [];
	$( '[data-a][data-b][data-c]' ).each( function() {
		let $_t = $( this );
		if ( $_t.data( 'a' ) === 'データA' && $_t.data( 'b' ) === 'データ1' ) {
			arr.push( $_t.data( 'c' ) );
		}
	} );
	console.log( arr );
} );
```**動くサンプル：**[https://jsfiddle.net/gpudx383/](https://jsfiddle.net/gpudx383/)

Comments

[退会済みユーザー]

サンプル確認しました。迅速な回答ありがとうございます！
参考にさせていただきます。