从Kuler API获取十六进制值

时间:2016-08-28 19:25:17

标签: javascript jquery xml api hex

我试图使用JQ / JS从Adobe Kuler API获取每个十六进制值:

kuler api xml

他们提供了一个xml,但是我很难抓住这些值并将它们放在这样的数组中:

var colors = [E6E2AF, A7A37E, EFECCA, 046380, 002F2F];

此元素中存在颜色

<description>
  Hex: E6E2AF, A7A37E, EFECCA, 046380, 002F2F
</description>

也在这里:

<kuler:swatchHexColor>
  E6E2AF
</kuler:swatchHexColor>

如果您有任何想法,我会非常感激,

  • ķ

1 个答案:

答案 0 :(得分:1)

我花了一些时间来找到适用于命名空间的选择器。这个选择器似乎可以完成这项工作。积分转到Fasani,以获得jQuery - XML parsing with namespaces中的答案。

$(xml).find('kuler\\:swatchHexColor, \\swatchHexColor');

完整摘录:

var colors = [];

$.ajax({
    type: "GET",
    url: 'https://kuler-api.adobe.com/rss/get.cfm?listType=popular&itemsPerPage=5&key=mykey',
    dataType: "xml",
    success: function(data){
       // Select all <kuler:swatchHexColor> tags
       var colorHexs = $(data).find('kuler\\:swatchHexColor, \\swatchHexColor');
       
       // Loop through them, push them to colors array, and then append it body
       $(colorHexs).each(function(i, hex){
         
         colors.push($(hex).text()); // push to array
         $('body').append('<div class="color" style="background:#'+$(hex).text()+'">'+$(hex).text()+'</div>');

       });

       // colors output.
       console.log(colors);
      
      
    }
});
.color {
  width:33.334%;
  height:100px;
  float:left;
  text-align:center;
  line-height:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

现金: