如何使用 jQuery 按数据属性过滤选项？答案

【问题标题】：How to filter options by data-attribute with jQuery?如何使用 jQuery 按数据属性过滤选项？
【发布时间】：2014-01-15 09:44:27
【问题描述】：

我有一个带有各种选项的选择框：

<select id="person">
  <option data-project_ids="11 23 19" value="17">Goodwin, Alisha</option>
  <option data-project_ids="16" value="20">Ratke, Danny</option>
  <option data-project_ids="" value="16">Powlowski, Ron</option>
  <option data-project_ids="19 7" value="20">Ratke, Danny</option>
</select>

如何通过data-project_id 过滤选项？

现在我有：

var project = 19; // just an example
$('#person').html().filter('[data-project_ids="' + project + '"]');

如果每个选项只有一个 data-project_id，这会工作。但是，通常有很多，有时根本没有。

感谢您的帮助。

【问题讨论】：

查看我的答案，这正是您所需要的。
作为旁注，数据属性实际上支持看起来像数组的字符串，并且它们将被 jQuery 解析为这样，这将更容易在数据属性上使用 $.inArray在过滤器中。

标签： javascript jquery filtering

【解决方案1】：

我建议将空格分隔的字符串值重新格式化为数组语法。 jQuery.data 会自动读取为数组

与使用 contains 选择器相比，这样做的一大优势是精度。只有当值相同时才会返回，contains 选择器也会返回部分匹配项。

<option data-project_ids="[11,23,19]" value="17">Goodwin, Alisha</option>

那么过滤器可以是这样的：

var project = 19
$('#person option').filter(function(){
   return $.inArray(project, $(this).data('project_ids')) > -1
});

使用传统的数组方法（推送、拼接等）可以轻松添加或删除 ID

DEMO

【讨论】：

谢谢@adeneo ...我也刚刚意识到只会得到绝对匹配，而contains 也会返回部分匹配
@charlietfl：在这种情况下，绝对匹配对我来说是完美的。仍在使用您的代码。已经从中学到了很多。

【解决方案2】：

如果你这样做：

$("#person [data-project_ids*=19]")

它甚至会选择data-project_ids=192，但你可以这样做：

$("#person [data-project_ids~=19]")

~= 是 jQuery 的 attribute-contains-word selector:

选择具有指定属性的元素，其值包含给定单词，由空格分隔。

【讨论】：

@Mehran Hatami：感谢您的帮助。第二个几乎可以满足我的需要。不过我仍在测试它。
但是如果 ID 191 存在呢？也会匹配。 contains 选择器并不总是足够精确
@charlietfl: what if ID 191 exists?，好吧，如果你想选择 ID 为 191 的确切节点，你应该做 $("#person [data-project_ids~=191]") 并且如果你想要 ID 为 19 的所有节点它，像319 or 191 or 219，你可以做$("#person [data-project_ids*=19]")
@MehranHatami 我相当怀疑 OP 想要部分匹配。如果 19 存在，并且 319 但过滤器需要 19 ，将使用 contains 方法获得两者。我只是指出这种方法的局限性。
@charlietfl：你是对的，但答案涵盖了这两种方法。 ...干杯！ :)

【解决方案3】：

$("#person [data-project_ids*=19]") 应该可以工作。

【讨论】：

否，因为有些元素具有像“12 15 19”这样的属性值。
公平地说，我已经更新了我的评论。但是，我觉得 OP 很可能首先解决了他遇到的任何问题。
同意 - 这不是组织这些价值观的最佳方式。
它甚至会选择data-project_ids=192，看看我的答案。
感谢您的帮助。你们认为“组织”这些价值观的更好方法是什么？