在jQuery中使用数据属性对象作为选择器

Question

我有以下数据属性对象：

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

我正在尝试使用jQuery中的特定id值来定位data-vp：

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

我这样做是为了只显示.fa.fa-times的特定实例，而不显示.fa.fa-times类的所有元素。

我知道上面的选择器显然不能正常工作，但是可以同时将data-vp和特定的ID作为目标吗？

Answer 1

您可以为此使用attribute-contains选择器：

$(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>

请注意，您的文字必须完全相同。

另一个选择是根据data-vp属性过滤元素：

$(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>

为此，必须将data-vp属性的内容设置为有效的json字符串。