JQuery.attr () multiple attributes

Question

Trying to get the attributes of an element using the .attr function. I dynamically create an input element using and assigning a value to a class attribute.

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

This will return:

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

the price is always different, but is it possible to pull out the third value of the class attribute, for example attr('class[2]') , etc.

Answer 1

You are using the class attribute incorrectly .
It is intended for visual presentation.

What you want to do is bind data to an element.

For this purpose you can use HTML5 data- attributes :

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

If you want to add a price to an element, simply render the HTML, similar to the one below on the server:

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

Answer 2

Do you have prices included in HTML as CSS classes? You cannot really rely on the order of CSS class names unless you have customized them in HTML and you never change them in JavaScript. Usually you should manipulate and test CSS classes in jQuery using . addClass (),. removeClass (),. toggleClass () and . hasClass () .

To store data, consider using data attributes:

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

and this will be easy to use with jQuery:

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

See DEMO . Instead of a range, you can use any tag that you are using right now.

Answer 3

If a class always has three classes, you can split them by a space and get a third index.

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

Answer 4

If you are sure that it will always be the third element in the class, you can do this:

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

This breaks the class into spaces and pulls out the third element.

However, if you are trying to store product information in the class field. The best option would be to use the data attribute, which is supported in HTML5 (and will not break anything in older browsers other than HTML5). For instance:

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

Answer 5

Run perhaps with

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

Then you can either iterate over it until you get one that matches the OR regular expression, if you are sure that it will always be in position 3 (and I'm not sure), you can try as you say, and just go with

 arrClasses[2] 

to get the price from your example.

Answer 6

you can use this as

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

this is just the answer you need, but don’t put any data in the class tag,