Javascript、JQ数据类型冲突

Question

我有一个元素列表，看起来像这个

<li class="depuy">
    <a class="comp" data-color="#66" href="#">
        Something
    </a>
</li>

在Backbone渲染中，我想为这些元素添加一种背景色，这些元素取自它们的数据属性。我试着做这个

var som_array = $(".com a");
var som_array_length = som_array.length;
for(var i=0;i<som_array_length;i++)
{
    var som_object = som_array[i].data("color");
    console.log(som_object);
}

但在控制台中，我收到了消息Uncaught TypeError: Object [object HTMLAnchorElement] has no method 'data'，但正如您所看到的那样。问题出在哪里？

Answer 1

这是因为当您使用jQuery对象的索引访问该对象中的项时，您访问的是实际项，而不是包含data方法的jQuery对象。

试试这个：

$(".depuy a").each(function() {
    console.log($(this).data('color'));
});

Answer 2

您必须将元素包装在jQuery集中。否则，它将只是一个没有jQuery函数的dom元素。

var competitors_array = $(".depuy a");
var competitors_array_length = competitors_array.length;
for(var i=0;i<competitors_array_length;i++)
{
    var competitor_object = $(competitors_array[i]).data("color"); // Like this
    console.log(competitor_object);
}