Question

This is a follow up to a previous question which seems to have confused people so I’ll purify it a bit. Here is some markup.

<div class='button width120 height30 iconLeft colorRed'></div> <div class='button width180 height20 iconPlus colorBlue'></div> <div class='button width200 height10 iconStar colorGreen'></div> <div class='button width110 height60 iconBack colorOrange'></div> 

The challenge is to fill in the code in the following.

$('.button').each(function(){      // Get the width from the class      // Get the height from the class      // Get the icon from the class      // Get the color from the class  }); 

Now, I know that you shouldn’t use classes this way so I’m not looking for alternative ways of doing it, this is an experiment and I’m interested to know if it’s possible to do it this way.

Answer 1

Something like:

$('.button').each(function(){     var classNames = $(this).attr('class').split(' ');     var width, height;     for(int i = 0; i < classNames.length; i++) {         var className = classNames[i];         if(className.indexOf('width') > -1) {             width = className.substring(5, className.length - 1);         } else if(className.indexOf('height') > -1) {             height = className.substring(6, className.length - 1);         } // etc. etc.     } }); 

Or have I misunderstood what you were asking?