カスタムデータ属性を取得して、該当するオブジェクトだけに選別する

Question

###前提・実現したいこと
カスタムデータ属性を取得して、該当するものだけに選別したいです。

###発生している問題・エラーメッセージ
一意の値を取得できない。

下記のソースコードの場合の例です。

<a data-foo="{"id":1,"type":"foo"}" href="/">foo</a>

上記に該当するものだけを塗り替えたいです。

###該当のソースコード

<a data-foo="{"id":1,"type":"foo"}" href="/">foo</a>
<a data-foo="{"id":2,"type":"bar"}" href="/">foo</a>
<a data-foo="{"id":3,"type":"baz"}" href="/">foo</a>
<a data-foo="{"id":1,"type":"foo"}" href="/">foo</a>

###試したこと

all = $('[data-foo]')
x = all[0]
array = []
$.each(all,
  function(index, elem) {
    console.log(index);
    if (x == elem) {
      array.push(elem);
    }
  }
)

この場合、最初しか一致せずに、最後が一致しません。
最後も一致して、二つのオブジェクトの値を変更したいです。

###補足情報(言語/FW/ツール等のバージョンなど)
jQuery

Answer 1

" がエスケープされていないから、ということでは？

<a data-foo='{"id":1,"type":"foo"}' href="/">foo</a>
<a data-foo='{"id":2,"type":"bar"}' href="/">foo</a>
<a data-foo='{"id":3,"type":"baz"}' href="/">foo</a>
<a data-foo='{"id":1,"type":"foo"}' href="/">foo</a>

Comments

[ayu]

kei344さん

ありがとうございます！
そちらでやってみます。