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匹配屬性數組中的對象的數據屬性值

回答

相關問題