ansaurus

Question

Answer 1

+6 A:

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?

roryf 2009-04-16 14:51:18

Substr wont quite work, since the height and width could be longer

Ólafur Waage 2009-04-16 14:53:09

eh? it uses className.length - 1, so the value can be of any length.

roryf 2009-04-16 14:54:12

I think you have understood the question :)Would this still work if the width wasn't there when the page loaded but I added it using $(".button").addClass("width250");Would the new class have been added to the class attribute?

jonhobbs 2009-04-16 14:55:53

@jonhobbs: Yes it would, at least if you run this code *after* you add the class. When you call addClass, jQuery simply modifies the className property of the element.

moff 2009-04-16 15:05:32

Answer 2

+2 A:

I found this answer which looks very robust...

$(".button").each(function(el){
    classStr = el.className;
    classes = classStr.split(' ');

    // Loop through classes and find the one that starts with icon

});

jonhobbs 2009-04-16 15:51:11

Answer 3

A:

I like to solve some challenges in silly ways. :D This is a very unelegant, inefficient and not very safe solution. But i had fun writing it.

<!doctype html>
<html>

  <head>

    <script src="jquery/jquery-1.3.2.min.js"></script>
    <script>
      $(function () {
        $(".button").each(function(){
          var div = $(this)
          div.css({"border":"1px solid black"});
          var classes = div.attr('class').split(' ').slice(1);
          classes.forEach( function (element) {
            div.append(/(width|height)(\d+)|(icon|color)(\S+)/.exec(element).filter(function (element) {return !!element} ).slice(1).join(": ").concat("<br>" ) )
          })
        })
      });

    </script>
  </head>
  <body>
    <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>


  </body>

</html>

Ohh, and it doesn't work in every browser. ;)

olle 2009-04-16 16:04:23

Answer 4

+3 A:

This is a terrible idea, but since you seem to already know that, here's the code:

$(".button").each( function() {
  var width, height, color, icon;
  $.each( $(this).attr('class').split(), function( cls ) {
    if( cls.match("^width") ) { width = cls.split('width').pop(); }
    else if( cls.match("^height") ) { height = cls.split('height').pop(); }
    else if( cls.match("^icon") ) { icon = cls.split('icon').pop(); }
    else if( cls.match("^color") ) { color = cls.split('color').pop(); }
  } );
  console.log( "width: " + width );
  console.log( "height: " + height );
  console.log( "icon: " + icon );
  console.log( "color: " + color );
});

thenduks 2009-04-16 16:05:17

Nice :) (10 chars? what if all I want is a smiley!)

roryf 2009-04-16 18:39:32

Answer 5

A:

$(".button").each( function() {
    var classStr = this.className;
    var classes = {}
    classStr.replace( /(width|height|icon|color)([a-z0-9]+)/gi,
        function( str, key, val ) {
            classes[key] = val;
        }
    );
    console.log( classes );
});

/*
 * {
 *     width:  '120',
 *     height: '30',
 *     icon:   'Left',
 *     color:  'Red'
 * }
 */

meouw 2009-04-16 16:17:44

Nice work, but you didn't extract out just the values. I'm pretty sure that's what he wanted. So, you're like halfway there.

KyleFarris 2009-04-16 17:11:18

Answer 6

A:

Why do you have such a class in a div?

2009-04-16 19:25:15

ansaurus

tags:

views:

answers:

Programming Challenge using jQuery

related questions