Using Data Attribute Object as a Selector in jQuery

Question

I have the following data attribute object:

<div data-vp="{
      id: "vp-485858383",
      customTwo: "test"
}">
</div>

I'm trying to target data-vp with the specific id value in jQuery:

$(['data-vp with id:vp-485858383'].parent().find('.fa.fa-times').show();

I'm doing this so I can show only a specific instance of .fa.fa-times rather than all elements with the .fa.fa-times class.

I know the selector above won't work obviously, but is it possible to target both data-vp along with the specific ID?

Answer 1

You can use the attribute-contains selector for that:

$(function() {
  $('[data-vp*="id: vp-485858383"]').css('color', 'red');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-vp='{
      id: vp-485858383,
      customTwo: "test"
}'>
asdf
</div>

Note that your text must be exactly the same.

Another option is to filter the elements based on the data-vp attribute:

$(function() {
  $('[data-vp]').filter(function(i, el) {
    return $(el).data('vp').id == 'vp-485858383';
  }).css('color', 'red');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-vp='{
      "id": "vp-485858383",
      "customTwo": "test"
}'>
asdf
</div>
<div data-vp='{
      "id": "vp-123",
      "customTwo": "test"
}'>
asdf
</div>

For that you must have the content of the data-vp attribute to be a valid json string.