Question

尝试使用.attr函数检索元素的attirbutes。我使用动态创建一个输入元素，并将值赋给class属性。

$('.item-selection-amount').click(function(){
    console.log($(this).attr('class'));
});

这将返回：

item-selection-amount ui-corner-all price
item-selection-amount ui-corner-all 66.00

价格总是不同，但是是否可以提取类属性的第三个值，例如attr('class[2]')等？

Answer 1

您正在使用class属性错误它旨在用于视觉呈现。

您要做的是将数据附加到元素。

为此，您可以使用HTML5 data-属性：

$('.item-selection-amount').data('price', 66.00);
// ... later
$('.item-selection-amount').click(function(){
  console.log( $(this).data('price') );
});

如果您想为元素添加价格，只需在服务器上呈现类似于下面的HTML：

<li class='item-selection-item' data-price='66.00'>Something</li>

Answer 2

您是否将HTML中包含的价格作为CSS类？您不能真正依赖CSS类名称的顺序，除非您在HTML中设置它们并且永远不会更改JavaScript。您通常应该使用jQuery来操作和测试CSS类 .addClass()， .removeClass()， .toggleClass()和 .hasClass()

对于存储数据，请考虑使用数据属性：

<span class="item-selection-amount" data-price="66.00">...</span>

使用jQuery很容易：

$('.item-selection-amount').click(function(){
    console.log($(this).data('price'));
});

见DEMO。您可以使用现在正在使用的任何标记，而不是跨度。

Answer 3

如果类总是有三个类，你可以按空格分割它们并得到第三个索引。

$(this).attr('class').split(" ")[2];

Answer 4

如果你是肯定的，它总是会成为班上的第3个元素，你可以这样做：

$('.item-selection-amount').click(function(){
    console.log($(this).attr('class').split(' ')[2]);
});

这会使空格中断，并拉出第3个元素。

但是，如果您尝试在“类”字段中存储有关产品的信息。更好的选择是使用HTML5支持的数据属性（并且不会破坏旧的非HTML5浏览器中的任何内容）。例如：

<li class="item-selection-amount" data-price="66.00">My Product</li>

Answer 5

或许用

开始

var arrClasses = $(this).attr('class').split(" ");

然后你可以循环，直到你得到一个匹配正则表达式，或者，如果你确信它将永远在位置3（我不会有信心），你可以尝试，如你所说，然后继续

arrClasses[2]

从你的例子中得到价格。

Answer 6

你可以像这样使用

$('.item-selection-amount').click(function(){
    console.log($(this).attr('class').split(' ')[2]);
});

这只是你需要的答案，但是不要在类标签上放任何数据，

jQuery .attr（）多个属性

6 个答案: