javascript - 根据数据属性的键值选择元素

Question

我有一个数据附加到具有相同类的多个 div 元素，我正在尝试创建一个过滤器，根据分配给元素的数据值显示/隐藏它们。我需要深入数据以根据数据中特定键的值选择元素。

这是一个 DIV HTML 的示例

<div class="design-layouts" data-json-object="{"id":"1","layout_name":"Layout 1","side":"1","orientation":"Horizontal","has_image_area":"1","tags":"fresh, happy, test","categories":[{"id":"30","category_name":"aaa"},{"id":"1","category_name":"Agriculture & Farming"},{"id":"2","category_name":"Animals & Pet Care"},{"id":"3","category_name":"Art & Entertainment"},{"id":"34","category_name":"asdfasf"},{"id":"4","category_name":"Automotive & Transportation"},{"id":"5","category_name":"Beauty & Spa"},{"id":"6","category_name":"Business Services"},{"id":"10..."24","category_name":"Travel & Airline"}],"styles":[{"id":"1","style_name":"Abstract","parent_id":"0"},{"id":"2","style_name":"Bold","parent_id":"0"},{"id":"3","style_name":"Patriotic & Military","parent_id":"2"}],"colors":[{"id":"2","color_name":"Blue","rgb_value":null,"hex_value":"#009cff"},{"id":"4","color_name":"Brown","rgb_value":null,"hex_value":"#746451"},{"id":"1","color_name":"Grayscale","rgb_value":null,"hex_value":"#666666"},{"id":"3","color_name":"Red","rgb_value":null,"hex_value":"#ed1c24"}]}">

我需要一些与此类似的实际可行的东西。

$( ".design-layouts[data-json-object='id':'1']" ).show(); 
$( ".design-layouts[data-json-object='color_name':'Red']" ).show();

Answer 1

第一个问题是该属性无效，因为它从其中的第一个 " 开始结束。您必须转换该属性中的所有 "属性为 " (因为属性值是 HTML 文本)，或者(更简单)只需在属性值两边使用单引号(前提是值中没有任何 ' )。

然后，您可以使用“属性包含”选择器来执行接近您想要的操作:

$( ".design-layouts[data-json-object*='\"id\":\"1\"']" ).css("color", "blue");

<div class="design-layouts" data-json-object='{"id":"1","layout_name":"Layout 1","side":"1","orientation":"Horizontal","has_image_area":"1","tags":"fresh, happy, test","categories":[{"id":"30","category_name":"aaa"},{"id":"1","category_name":"Agriculture & Farming"},{"id":"2","category_name":"Animals & Pet Care"},{"id":"3","category_name":"Art & Entertainment"},{"id":"34","category_name":"asdfasf"},{"id":"4","category_name":"Automotive & Transportation"},{"id":"5","category_name":"Beauty & Spa"},{"id":"6","category_name":"Business Services"},{"id":"10","category_name":"Travel & Airline"}],"styles":[{"id":"1","style_name":"Abstract","parent_id":"0"},{"id":"2","style_name":"Bold","parent_id":"0"},{"id":"3","style_name":"Patriotic & Military","parent_id":"2"}],"colors":[{"id":"2","color_name":"Blue","rgb_value":null,"hex_value":"#009cff"},{"id":"4","color_name":"Brown","rgb_value":null,"hex_value":"#746451"},{"id":"1","color_name":"Grayscale","rgb_value":null,"hex_value":"#666666"},{"id":"3","color_name":"Red","rgb_value":null,"hex_value":"#ed1c24"}]}'>Text in the div</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

...但问题是它纯粹是文本。

相反，您可能需要循环遍历匹配元素，解析 JSON，然后决定要做什么。您可以使用过滤器来做到这一点:

$(".design-layouts[data-json-object]").filter(function() {
    return JSON.parse($(this).attr("data-json-object")).id == "1";
}).css("color", "blue");

<div class="design-layouts" data-json-object='{"id":"1","layout_name":"Layout 1","side":"1","orientation":"Horizontal","has_image_area":"1","tags":"fresh, happy, test","categories":[{"id":"30","category_name":"aaa"},{"id":"1","category_name":"Agriculture & Farming"},{"id":"2","category_name":"Animals & Pet Care"},{"id":"3","category_name":"Art & Entertainment"},{"id":"34","category_name":"asdfasf"},{"id":"4","category_name":"Automotive & Transportation"},{"id":"5","category_name":"Beauty & Spa"},{"id":"6","category_name":"Business Services"},{"id":"10","category_name":"Travel & Airline"}],"styles":[{"id":"1","style_name":"Abstract","parent_id":"0"},{"id":"2","style_name":"Bold","parent_id":"0"},{"id":"3","style_name":"Patriotic & Military","parent_id":"2"}],"colors":[{"id":"2","color_name":"Blue","rgb_value":null,"hex_value":"#009cff"},{"id":"4","color_name":"Brown","rgb_value":null,"hex_value":"#746451"},{"id":"1","color_name":"Grayscale","rgb_value":null,"hex_value":"#666666"},{"id":"3","color_name":"Red","rgb_value":null,"hex_value":"#ed1c24"}]}'>Text in the div</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

这使您可以围绕要选择的元素执行更复杂的条件。

如果您要多次执行此操作，则在加载元素后将解析结果存储在 jQuery 的 data 缓存中可能会很有用:

$(".design-layouts[data-json-object]").each(function() {
    var $this = $(this);
    $this.data("jsonObject", JSON.parse($this.attr("data-json-object")));
});

...然后您在处理它们时就不必重新解析。 (我在上面选择的名称 jsonObject 是 jQuery 自动分配该 data-* 属性的名称。不过，如果您愿意，可以使用不同的名称。)