カスタムデータを絞り込みたい

Question

やりたいこと

カスタムデータを持っているDOMに対して、ある特定の同じ値を持っている別のDOMに処理を行いたいです。
カスタムデータの値による絞り込み方法がわからず困っております。

現状

<ul class="list">
	<li class="list-item" data-cord="cat"></li>
	<li class="list-item" data-cord="dog"></li>
</ul>

<div class="foo">
	<div class="foo-item" data-cord="cat"></div>
	<div class="foo-item" data-cord="dog"></div>
</div>

const listItems = $('.list-item');

listItems.on('click', (event) => {
	const itemCord = $(event.currentTarget).attr('data-cord');

	// 同じitemCordを持ったfoo-itemに対して処理を行いたい
});

Answer 1

querySelectorAllを使うと良いと思います。

document.querySelectorAll('.foo-item[data-cord="cat"]');

例えばこれでclassがfoo-itemのdata-cord="cat"な要素がすべて取得できます。

参照: https://zukucode.com/2017/12/javascript-query-data.html

Comments

[miyabeam]

ありがとうございます！
querySelectorAllだとlist-itemを含めて取得してしまうと思うのですがどうでしょうか。
処理を行いたいのは同じitemCordを持つfoo-itemになります。

[Takumiboo]

querySelectorAllはCSSのセレクタと同じ表記法となるので、「document.querySelectorAll('.foo-item[data-cord="cat"]');」ではいかがでしょうか。data-cordがcatのfoo-itemクラスの要素が選択されます。

[miyabeam]

なるほど！
下記で同じitemCordのDOMを取得できました。ありがとうございます！
document.querySelectorAll(`.foo-item[data-cord="${ itemCord }"]`);