All geek questions in one place

Programming a call using jQuery

This is the result of a previous question that seems to have confused people, so I’ll clean it up 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 populate the code as follows.

$(".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 should not use classes in such a way that I do not look for alternative ways to do this, this is an experiment, and I am interested to know if it is possible to do so.

+3
source share
5 answers

Sort of:

$(".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 did I misunderstand what you were asking?

+7
source

I found this answer that looks very reliable ...

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

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

});
+3
source

, , , , :

$(".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 );
});
+3
$(".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'
 * }
 */
+1

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

, .;)

0

Source: https://habr.com/ru/post/1706531/

More articles:


All Articles