jQuery 匹配属性数组中 object 的 data-attribute 值

Question

我试图通过匹配 object 中的一个属性的值在数据数组 object 中找到一个 object。我的标题可能不是最好的，但我不确定如何描述它。

例如，对于下面的 div，我想从 "data-variants" 数组中获取颜色 "black" 的 "attributes" 的整个列表：（我扩展了 html 以便于阅读）

<div id="yui_3_17_2_1_1463518293327_182" class="product-variants" data-variants="
[
    {"attributes":
        {"color":"red"},
        "optionValues":[{"optionName":"color","value":"red"}],
        "sku":"SQ7490795",
        "price":2000,
        "salePrice":0,
        "onSale":false,
        "unlimited":false,
        "qtyInStock":1,
        "len":0.0,
        "width":0.0,
        "height":0.0,
        "weight":0.0
    },

{"attributes":{"color":"black"},"optionValues":[{"optionName":"color","value":"black"}],"sku":"SQ0598849","price":2000,"salePrice":0,"onSale":false,"unlimited":false,"qtyInStock":1,"len":0.0,"width":0.0,"height":0.0,"weight":0.0},

{"attributes":{"color":"orange"},"optionValues":[{"optionName":"color","value":"orange"}],"sku":"SQ5650843","price":2000,"salePrice":0,"onSale":false,"unlimited":false,"qtyInStock":1,"len":0.0,"width":0.0,"height":0.0,"weight":0.0}

]" 

data-item-id="570c23edf699bb9c6946e2e7">

我试过各种版本：

console.log( $('.product-variants').data("variants").attributes("color" = "black") );

但我得到错误或未定义。

顺便说一下，HTML 数据是由平台 (Squarespace) 动态生成的，所以我无权更改它。

在此先感谢您的帮助！

Answer 1

如果您显示的 HTML 是由 Squarespace 直接生成的，那么您将无法使用它，因为标记无效。您能否提供用于从 Squarespace 加载数据的确切代码？

如果使用双引号定义 data-variants 属性，则不能在属性中使用双引号。以下示例完美运行：

<!DOCTYPE html>
<html>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>Untitled 1</title>
    <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(function() {
            var data = $('.product-variants').data("variants");
            $.each(data, function() {
                console.log(this["sku"]);
            });
        });
    </script>
</head>

<body>
    <div id="yui_3_17_2_1_1463518293327_182" class="product-variants" data-variants='[
    {"attributes": {"color":"red"},"optionValues":[{"optionName":"color","value":"red"}],"sku":"SQ7490795","price":2000,"salePrice":0,"onSale":false,"unlimited":false,"qtyInStock":1,"len":0.0,"width":0.0,"height":0.0,"weight":0.0 },
    {"attributes":{"color":"black"},"optionValues":[{"optionName":"color","value":"black"}],"sku":"SQ0598849","price":2000,"salePrice":0,"onSale":false,"unlimited":false,"qtyInStock":1,"len":0.0,"width":0.0,"height":0.0,"weight":0.0},
    {"attributes":{"color":"orange"},"optionValues":[{"optionName":"color","value":"orange"}],"sku":"SQ5650843","price":2000,"salePrice":0,"onSale":false,"unlimited":false,"qtyInStock":1,"len":0.0,"width":0.0,"height":0.0,"weight":0.0}
]' data-item-id="570c23edf699bb9c6946e2e7"></div>

</body>

</html>

Answer 2

首先，您必须将元素属性中的双引号更改为单引号，以便转义属性值中 JSON 中的双引号。

然后你必须循环遍历属性对象来检查你想要的任何东西。

// Get the attribute value (jQuery already parses it as Object)
    var json = $(".product-variants").data("variants");

    // Make a loop trhougt the JSON object and check if it's color property is 'black'
    $.each(json, function () {
        if (this.attributes.color == "black") {
            // If it's 'black' then print it in the "#result" element
            $("#result").text( JSON.stringify(this) ); // 'this' is your result
        }
    });

看看这个 fiddle： https://jsfiddle.net/evandroprogram/nf5zq63z/

jQuery 匹配属性数组中 object 的 data-attribute 值

jQuery match data-attribute value of object within array of attributes

jquery

html

custom-data-attribute