jQueryで特定のデータ属性を持つ要素へのアクセス

Question

前提・実現したいこと

jQueryでlocalstorageに保存したidを使って特定のデータ属性を持つ要素へアクセスしたいです。

該当のソースコード

$("[data-tweet-id=ここに任意のidを入れたい]")

試したこと

$("[data-tweet-id=localStorage.getItem('tweet-id')]")

let id = localStorage.getItem('tweet-id');
$("[data-tweet-id=`${id}`]")

いずれもできませんでした。

Answer 1

<span data-twid="tw1">いくら</span>
<span data-twid="tw2">さけ</span>
<span data-twid="tw3">まぐろ</span>

<script>
let twid ="tw2";
alert($("[data-twid='"+twid+"']").html());
$("span").each(function(){
alert($(this).data('twid'));
})
</script>

Answer 2

セレクタとして処理したいなら文字列の結合です
あまりおすすめしませんがfilterでも処理ができます

<script>
$(function(){
  var id="2";
  $("[data-tweet-id="+id+"]").css("color","red");
  id="3";
  $("[data-tweet-id]").filter(function(){
    return $(this).data("tweet-id")==id;
  }).css("color","blue");
});
</script>
<div data-tweet-id="1">1</div>
<div data-tweet-id="2">2</div>
<div data-tweet-id="3">3</div>

Answer 3

こんにちは。

以下のような感じでいかがでしょう？

<ul>
  <li data-tweet-id="1">データA</li>
  <li data-tweet-id="2">データB</li>
  <li data-tweet-id="3">データC</li>
  <li data-tweet-id="4">データD</li>
</ul>

localStorage.setItem('tweet-id', 3);

const id = localStorage.getItem('tweet-id');

const matchedText = $(`[data-tweet-id=${id}]`).text();

console.log(id, matchedText);  // => 3 データC

以下、上記の動作確認用のサンプルです。

• https://jsfiddle.net/jun68ykt/ugrm0b9j/10/

参考になれば幸いです。

Comments

[退会済みユーザー]

ありがとうございます！

[jun68ykt]

解決されたようですね、よかったです ????