JQuery, используя одну функцию вместо нескольких

Question

Здравствуйте, я хотел бы упростить эти 4 аналогичные функции. В конце концов меняются только селекторы. Как я могу продолжить? Много thanx!

$('.box.standard .title').css({ 
       'position' : 'absolute', 
       'left' : '50%', 
       'top' : '50%', 
       'margin-left' : -$('.box.standard .title').outerWidth()/2, 
       'margin-top' : -$('.box.standard .title').outerHeight()/2 
      }); 

      $('.box.large .title').css({ 
       'position' : 'absolute', 
       'left' : '50%', 
       'top' : '50%', 
       'margin-left' : -$('.box.large .title').outerWidth()/2, 
       'margin-top' : -$('.box.large .title').outerHeight()/2 
      }); 

      $('.box.wide .title').css({ 
       'position' : 'absolute', 
       'left' : '50%', 
       'top' : '50%', 
       'margin-left' : -$('.box.wide .title').outerWidth()/2, 
       'margin-top' : -$('.box.wide .title').outerHeight()/2 
      }); 

Answer 1

Try:

var myArray = ['.box.standard', '.box.large', '.box.wide']; 

for (var i of myArray) { 

    $(i+' .title').css({ 
       'position' : 'absolute', 
       'left' : '50%', 
       'top' : '50%', 
       'margin-left' : -$(i+' .title').outerWidth()/2, 
       'margin-top' : -$(i+' .title').outerHeight()/2 
      }); 

} 

Answer 2

Сделать это функция и использовать его всякий раз, когда вам нравится:

function myFunction(cssClasses){ 

    $(cssClasses).css({ 
        'position' : 'absolute', 
        'left' : '50%', 
        'top' : '50%', 
        'margin-left' : -$('.box.wide .title').outerWidth()/2, 
        'margin-top' : -$('.box.wide .title').outerHeight()/2 
       }); 

} 

myFunction('.box.standard .title'); 
myFunction('.box.large .title'); 
myFunction('.box.wide .title'); 

Answer 3

Вы можете использовать функцию, чтобы помочь вам получить доступ к this, который относится к выбранному элемент. Это должно сделать это:

 $('.box.standard .title, .box.large .title, .box.wide .title').css({ 
      'position' : 'absolute', 
      'left' : '50%', 
      'top' : '50%', 
      'margin-left' : function() { 
       return -$(this).outerWidth()/2; 
      }, 
      'margin-top' : function() { 
       return -$(this).outerHeight()/2; 
      } 
     });