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

第一个问题是该属性无效，因为它在其中的第一个matrix = [[1, 2, 3], [4, 5, 6], [7, 8, 9]] print top(matrix).foo() # 45 print middle_0(matrix).foo() # 15 print middle_1(3, 3).foo() # 45 # print bottom(3, 3).foo() # 15结束。您必须将属性中的所有"转换为"（因为属性值是HTML文本），或者（更简单）只使用属性值周围的单引号（前提是没有）值中的任何"。

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

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

......但问题在于它纯粹是文本性的。

相反，您可能需要遍历匹配元素，解析JSON，然后决定要做什么。您可以使用<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>：

执行此操作

filter

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

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

如果您要多次执行此操作，一旦加载元素以将解析结果存储在jQuery的<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>缓存中，它可能很有用：

data

...然后您在处理它们时不必再解析。（我在上面选择的名称$(".design-layouts[data-json-object]").each(function() { var $this = $(this); $this.data("jsonObject", JSON.parse($this.attr("data-json-object"))); });是jQuery自动分配jsonObject属性的名称。但是，如果你喜欢，可以使用不同的名称。）

Answer 2

我相信类似的东西可以解决这个问题：

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

Answer 3

您可以使用属性对象来获取数据。 EG

var dat = element.attributes["data-name-you-want"].value; 
                                            // gets the value stored in
                                            // the data attribute of an
                                            // element. You can also use 
                                            // dot notation and camel case
var dat element.attributes.dataNameYouWant.value;

所以在你的情况下你会

if(element.attributes["data-json-object"]){ // make sure the data is there
    // now parse it and look for the attribute you are after in the JSON
    if((JSON.parse(element.attributes["data-json-object"].value)).colour_name === 'red'){
        // you have found the colour red..
    }
}

虽然我会将它全部包装在try catch中，因为JSON很难预测错误，但您使用的是JQuery。

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

3 个答案: