Question

这是对前一个问题的跟进，似乎让人感到困惑，所以我会稍微净化一下。这是一些标记。

<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

});

现在，我知道你不应该以这种方式使用类，所以我不是在寻找替代方法，这是一个实验，我很想知道是否可以这样做。< / p>

Answer 1

类似的东西：

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

或者我误解了你的要求？

Answer 2

我发现这个答案非常强大......

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

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

});

Answer 3

这是一个可怕的想法，但是因为你似乎已经知道了，这是代码：

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

Answer 4

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

Answer 5

我喜欢以愚蠢的方式解决一些挑战。：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>

哦，它在每个浏览器中都不起作用。 ;）

使用jQuery编程挑战

5 个答案: