Грязный, но рабочий JQuery

Question

Я написал jQuery, который вы увидите ниже для небольшого проекта, над которым я работаю.Он отлично работает и все готово, но, как вы видите, он грязный и отчасти ... затяжной.

Я пробовал кучу разных способов убрать это, но недостаточно ниндзя, чтобы действительно убрать это.Любой совет?Заранее спасибо, ребята!

  var colspan = $(".col header span"),
      rowspan = $(".row header span"),
      topspan = $(".top header span");

  var colh2 = $(".col header h2").h2width();
  var rowh2 = $(".row header h2").h2width();
  var toph2 = $(".top header h2").h2width();

  var colwidth = 820 - colh2;
  var rowwidth = 820 - rowh2;
  var topwidth = 820 - toph2;

  colspan.css({float: 'left', width: colwidth});
  rowspan.css({float: 'left', width: rowwidth});
  topspan.css({float: 'left', width: topwidth}); 

Answer 1

["col", "row", "top"].forEach(function (className) {
  var str = "." + className + " header";
  var h2s = document.querySelectorAll(str + " h2");
  var spans = document.querySelectorAll(str + " span");
  var width = 820 - h2width(h2s);
  Array.prototype.forEach.call(spans, function (span) {
    span.style.float = "left";
    span.style.width = width;
  });
});

Потому что jQuery всегда перебор.

Answer 2

Я бы так сделал, может быть?короче, но, возможно, не так хорошо задокументировано:

$(".col header span, .row header span, .top header span").each(function(){
    $(this).css({
        float: 'left',
        width: 820 - $(this).siblings("h2").width()
    });
});

Answer 3

Я бы, вероятно, переписал ваш код следующим образом:

var conts = {
    'col': jQuery('.col header'),
    'row': jQuery('.row header'),
    'top': jQuery('.top header')
};

jQuery.each(conts, function(index, val){
    val.find('span').css({
        'float': 'left',
        'width': 820-val.find('h2').h2width()
    });
});

При этом используется кэширование основных элементов , а затем будет повторять все из них , применяяаналогичные действия.

Подробнее о функции jQuery .each () .

РЕДАКТИРОВАНИЕ: Или еще короче:

jQuery('.col header, .row header, .top header').each(function(){
    var current = jQuery(this);
    current.find('span').css({
        'float': 'left',
        'width': 820 - current.find('h2').h2width()
    });
});

Answer 4

Просто используйте функцию:

function updateStyle(name){
   var headerSpan = $('.' + name + ' header span');
   var headerH2 = $('.' + name + ' header h2');
   headerSpan.css({float: 'left', width: 820 - headerH2.h2width()});
}

updateStyle('col');
updateStyle('row');
updateStyle('top');

Answer 5

Просто избавьтесь от дубликата кода:

$.each(['.col', '.row', '.top'], function(i, cls) {
    var width = $(cls + ' header h2').h2width();
    $(cls + ' header span').css({
        float: 'left',
        width: 820 - width
    });
});