jQueryを使用したプログラミングチャレンジ

これは前の質問のフォローアップで、人々を混乱させていると思われるので、少し浄化します。ここにいくつかのマークアップがあります。jQueryを使用したプログラミングチャレンジ

<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>

挑戦は以下のコードを記入することです。

$(".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 

});

さて、私はあなたがクラスをこのように使うべきではないことを知っているので、私はそれを行うための代替方法を探していないよ、これは実験であり、私はそれはそれを行うことは可能ですかどうかを知るために興味こちらです。

出典

2009-04-16 jonhobbs

高さと幅は、可能性があるため、過剰 – tj111

ような何か：

$(".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. 
    } 
});

または私はあなたが求めていたものを誤解がありますか？

出典

2009-04-16 14:51:18 roryf

SUBSTR文句を言わないのはかなりの作業CSSです長い –

ええ？ className.length - 1を使用するため、値は任意の長さにできます。 – roryf

私はあなたが質問を理解していると思います:) これは、ページが読み込まれたときに幅がなくても$（ "。button"）を使用して追加した場合でも機能しますか？addClass（ "width250"）; 新しいクラスがクラス属性に追加されましたか？ – jonhobbs

私は愚かな方法でいくつかの課題を解決したいと

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

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

});

出典

2009-04-16 15:51:11 jonhobbs

...非常に堅牢に見えるこの答えを見つけました。：Dこれは非常に不愉快で、非効率的で、安全ではない解決策です。しかし、私はそれを書くのが楽しいです。

<!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>

ああ、すべてのブラウザで動作しません。 ;）

出典

2009-04-16 16:04:23 olle

これはひどいアイデアですが、あなたはすでにここのコードだ、ということを知っているように見えるので、：

$(".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); 
});

出典

2009-04-16 16:05:17 rfunduk

ニース:)（10文字？私が欲しいのは、笑顔です！） – roryf

$(".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' 
* } 
*/

出典

2009-04-16 16:17:44 meouw

いい仕事ですが、値だけを抽出しませんでした。私はそれが彼が望んだものだと確信しています。だから、あなたはそこの半分のようだ。 – KyleFarris

jQueryを使用したプログラミングチャレンジ

答えて

関連する問題