Question

我试图通过匹配对象中某个属性的值来查找数据对象数组中的对象。我的头衔可能不是最好的，但我不确定如何描述这个。

例如，对于以下div，我想从“data-variants”数组中获取颜色“black”的整个“属性”列表：（我已经扩展了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
        }
    });

看看这个小提琴： https://jsfiddle.net/evandroprogram/nf5zq63z/

jQuery匹配属性数组中对象的数据属性值

2 个答案: