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

这是CSS矫枉过正 – tj111 2009-04-16 19:31:19

喜欢的东西：

$(".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不会完全奏效，因为高度和宽度可更长 – 2009-04-16 14:53:09

呃？它使用className.length - 1，因此该值可以是任意长度。 – roryf 2009-04-16 14:54:12

我认为你已经理解了这个问题:) 如果当页面加载的时候宽度不在那里，但是我使用$（“。button”）。addClass（“width250”）; 新类是否已添加到类属性中？ – jonhobbs 2009-04-16 14:55:53

我发现这个答案看起来很健壮......

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

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

使用jQuery进行编程挑战

回答

相关问题