HTMLカスタムデータ属性が「複数あるケース」でのjQueryによる取得

Question

このHTMLで「kaori-1」だけ赤くしたいのですが、カスタムデータ属性で指定する場合どう書くべきでしょうか？

<div data-test='{"target_name":"miwa","target_id":"1"}'>miwa-1</div>
<div data-tset='{"target_name":"kaori","target_id":"1"}'>kaori-1</div>
<div data-test='{"target_name":"kaori","target_id":"2"}'>kaori-2</div>

下記で出来るつもりなのですが、何がいけないのかわからず躓いています。

var target_name = 'kaori';
var target_id = '1';

$("[data-test='target_name':'"+target_name+"'][data-test='target_id':'"+target_id+"']").css('color','red');

Comments

[退会済みユーザー]

て・・・元のHTMLの作成方針を間違えてるきがするな・・・・

<div data-test-target_name="miwa" data-test-target_id="1">miwa-1</div>

的な作りにするだろう

[m.ts10806]

↑賛成です。わざわざ複雑な定義にする意味がないですね。(回答にしてもいいのでは？)

[mac_mac]

「data-test」「data-test2」などがいくつかあり、その中で「target_name」と「target_id」はjqueryに合わせてワンセットな感じだったのでひとまとめにしてみたんですけど、やはり別の方がいいでしょうかね。

[think49]

まとめるメリットがないように読めますね。JSONはparseしてからループ判定するので、明らかに検索効率が低下しています。
オブジェクトにデータを持たせたいなら、new Map側に持たせるとか、設計方針を見直した方が良いと思います。

[mac_mac]

そうでしたか。ご指摘くださってありがとうございます。

Answer 1

こんにちは。

data-test 属性を持っている要素の中で、その属性値のオブジェクトが、指定のtarget_nameおよびtarget_idに合致するかについてfilterすればよいです。

以下では、指定のtarget_nameおよびtarget_idに合致する要素のJQueryオブジェクトを返す関数を作りました。

const search = (target_name, target_id) =>
  $('[data-test]').filter(
      function() {
        const test = $(this).data('test');
        return test.target_name === target_name && test.target_id === target_id;
     }
  );
    

以下は、上記の関数searchの使用例です。

• 上記の関数の使用例： https://jsfiddle.net/jun68ykt/o9bguhLr/1/

以上、参考になれば幸いです。

Comments

[mac_mac]

一番わかりやすかったです。どうもありがとうございます！

[jun68ykt]

どういたしまして。解決されたようで、よかったです????

Answer 2

カスタムデータ属性の用途を間違えているのではないでしょうか。カスタムデータ属性は、JavaScriptにデータを渡す際などに用いられます。
以下で簡単にできるのに、わざわざ複雑にする必要もないかと思います。

<div id="t1">kaori-1</div>
<div id="t2">kaori-2</div>
<div id="t3">miwa-1</div>

var target_name = 'kaori';  // これは不要となる
var target_id = '1';
$("#t"+target_id).css('color','red');

Comments

[mac_mac]

クラスつけずにできれば楽かなと思ったのですが、やはり用途にあわせて付けた方がいいでしょうかね。ありがとうございます。

Answer 3

まあこんなかんじだな。

JSON形式の属性を含めるなんて普通はしない。

HTML

<script
  src="https://code.jquery.com/jquery-3.3.1.slim.js"
  integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA="
  crossorigin="anonymous"></script>

<div data-test='{"target_name":"miwa","target_id":"1"}'>miwa-1</div>
<div >miwa-1</div>
<div data-test='{"target_name":"miwa","target_id":"12"}'>miwa-1</div>
<div data-test='{"target_name":"kaori","target_id":"1"}'>kaori-1</div>
<div data-test='{"target_name":"kaori","target_id":"2"}'>kaori-2</div>

JQUERY

// <div data-test='{"target_name":"miwa","target_id":"1"}'>miwa-1</div>

$(function(){
    $("div[data-test*='target_name'][data-test*='miwa'][data-test*='target_id'][data-test*='1']").each(function(){
        var json = $.parseJSON( $(this).attr("data-test") );
        console.log(json);
        if (json.target_name == "miwa" && json.target_id == "1") {
            $(this).css("background-color", "red");
        }
    });
});

Comments

[mac_mac]

なるほどありがとうございます。