Jquery - How to pass multiple variable through class name?

Question

I want to create a generic/scalable class that is able to accept none or multiple variables and process it. I want to learn how to check which field is present, number of field passed and do something with it. The 'fruitstall' class can accept 0 or multiple number of fruits variable.

HTML:

<div class="fruitstall(apple,orange)"></div>

Script:

$('.fruitstall').click(function(event){
   if (get first variable value and check if it is an apple) {
      //Show apple image 
   } elseif (get the next variable value and check if it is an orange) {
      //Show orange image
   }
   alert('Number of fruit chosen are ' + (count number of variable passed to class) + ' ; ' fruit(index0) + fruit(index1));
});

Pardon my fruit stall example, I thought it would be interesting to ask question in a more lively method. :)

Thank you very much.

Classes do not work like that, they are just identifiers, not variables. You can add multiple classes though `.fruitstall .apple .orange`. Though classes do not have defined order necessarily, so if first and second order matter, as opposed to two or more entries, then that is not sound. — Orbling, May 11 '11 at 15:00
Also, usually, it is not a good idea to simplify your example, as you may well end up with inappropriate solutions. (or leave in other text, `.colourpicker`)? — Orbling, May 11 '11 at 15:03
@Orbling , Ops, I type the wrong class to check on click, I edited it. Supposely should be .fruitstall. Typo error. — maomaopop, May 11 '11 at 15:11

score 3 · Answer 1 · edited May 23 '17 at 12:26

3

You can have multiple classes assigned:

<div class="apple orange" id="divId"></div>

And then do a split on them like so:

var classList =$('#divId').attr('class').split(/\s+/);
$.each( classList, function(index, item){
    if (item=='someClass') {
       //do something
    }
});

Source: Get class list for element with jQuery

edited May 23 '17 at 12:26

Community

1
1

answered May 11 '11 at 15:02

onteria_

68,181
7
71
64

Is there no other way? I have seen some Jquery validation that has classes named **class="validate[required,custom[quantity],minCheckbox[1]]"**. How does that works? – maomaopop May 11 '11 at 15:14
@mmk That would require custom parsing of the className, and the code would be VERY complicated / cumbersome. – onteria_ May 11 '11 at 15:21
@_onteria : But if that is the only way then Groovek's answer using AJAX JSON might work. – maomaopop May 11 '11 at 15:30
@mmk 1) It uses eval and should use a proper JSON parser 2) That's a bit much just to get the class name's tokenized versus using split and working on the individual elements – onteria_ May 11 '11 at 15:32

score 3 · Accepted Answer · answered May 11 '11 at 15:08

3

Another way might be to use HTML5 data attributes:

<div class="fruitstall" data-fruits="apple,orange"></div>

Then your JS code could go:

var fruits = $(this).data('fruits').split(',');

which would get an array of all the fruits for the stall.

answered May 11 '11 at 15:08

rusty

2,771
1
24
23

+1 this is in fact a perfect example for the usage of the data attribute. – DanielB May 11 '11 at 15:10
HTML5 is not cross platform compatible. A mass majority of the world browser is the the aged old snail processing IE6. So data attributes might not be a suitable solution. – maomaopop May 11 '11 at 15:16
@mmk: While that is true about HTML5 in general, if you are just using an extra element attribute then you will be just fine -- all browsers will accept that. Take a look at http://caniuse.com/#feat=dataset -- "All browsers can already use data-* attributes and access them using getAttribute." – rusty May 11 '11 at 15:46
@mmk: IE6 is far from a majority, single figures usage. But still, HTML5 data attributes will cause hassles in more areas than that. – Orbling May 11 '11 at 15:57
After reading getAttribute compatibility list, I think I will finalize and use that as a solution to my project. Thank you, your answer will be selected as an answer! Cheers. – maomaopop May 11 '11 at 16:06

score 1 · Answer 3 · answered May 11 '11 at 15:10

1

I don't know if that could work, but if you prepare you class String as a JSON one, you could use eval() to get an object from which you could enumerate arguments

 function prepareAsJSON(className){
        var JSON = "{list:function" + className + "{return arguments}}"
        return JSON
 }

 var className = $("div").attr('class');
 var st = prepareAsJSON(className);
 var obj = eval(st)
 obj.list() //should return arguments as an array

I would never do that in production code, but that's pretty funny

Cheers

Grooveek

answered May 11 '11 at 15:10

Grooveek

10,046
1
27
37

Interesting idea you have there but that is kinda weird. But nevertheless good attempt! :) – maomaopop May 11 '11 at 15:21
1

@mmk : I know it's weird. What's more weird is writing function in class names, no ? So weird answer to weird question... :-D Funny to think about, though – Grooveek May 11 '11 at 15:33

Jquery - How to pass multiple variable through class name?

3 Answers3