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

我想通过匹配对象中的其中一个属性的值来查找数据对象数组中的对象。我的标题可能不是最好的，但我不确定如何描述这一点。jQuery匹配属性数组中的对象的数据属性值

例如，对于下面的div，我想从“数据变种”阵列获得“属性”为“黑”的整个列表：（我已经扩大为便于阅读的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）动态生成的，所以我无法访问它进行更改。

在此先感谢您的帮助！

来源

2016-05-17 ep2020

你试试用单引号代替双引号为您的数据变体的属性？当第一个双引号以“attributes”开始时，双引号将关闭。所以试试这个data-variants =' [ {“attributes”：（.....）'<-closing single quote。 – atomCode

谢谢，但数据是由平台（Squarespace）动态生成的，所以我无法更改格式。我会将其添加到我的问题。 – ep2020

如果您显示的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>

来源

2016-05-17 22:41:21

其实我试过你的示例函数，它对我也适用，即使使用无效标记。为什么，我不知道。但这很有帮助，所以谢谢。 – ep2020

@ ep2020 - 如果这有助于您解决问题，您会将其标记为接受的答案吗？ –

首先，你必须改变元素属性的双引号为单引号，以逃避属性值内的JSON双引号。

然后你将不得不做一个循环trought属性对象来检查你想要的。

// 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/

来源

2016-05-17 22:44:17 evsar3

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

回答

相关问题