jQuery .attr () несколько атрибутов

Question

Попытка извлечь атрибуты элемента с помощью функции .attr.Я динамически создаю элемент ввода с использованием и присваиваю значение атрибуту класса.

$('.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.Обычно вы должны манипулировать и тестировать CSS-классы в jQuery, используя .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 .Вместо span вы можете использовать любой тег, который вы используете прямо сейчас.

Answer 3

Если вы уверены, что он всегда будет третьим элементом в классе, вы можете сделать это:

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

Это разбивает класс на пробелы и вытаскивает третий элемент.*

Однако, если вы пытаетесь сохранить информацию о товаре в поле «класс».Лучшим вариантом будет использование атрибута данных, который поддерживается в HTML5 (и ничего не нарушает в старых браузерах, отличных от HTML5).Например:

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

Answer 4

Если в классе всегда есть три класса, вы можете разделить их по пробелам и получить третий индекс.

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

Answer 5

вы можете использовать вот так

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

это только ответ на ваши вопросы, но не помещайте никаких данных в тег класса,

Answer 6

Начните, возможно, с

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

Затем вы можете либо повторить цикл, пока не получите тот, который соответствует регулярному выражению, ИЛИ, если вы уверены, что он всегда будет в позиции 3 (и яне был бы уверен) вы можете попробовать, как вы говорите, и просто пойти с

arrClasses[2]

, чтобы получить цену из вашего примера.