Как можно улучшить код на JQuery?

Question

[keslo]

Еще раз добрый день.
Есть такой код:

// add class and button
	var option = ['item-id', 'item-title', 'item-price', 'delete-btn'];
	$('#sf tr').each( function() {
		// add button "Add to cart"
		$(this).add('<td></td>');
		$(this).find('td:last').append('<a class="add_item">Добавить в корзину</a>');

		// add class
		$(this).find('td').each( function(index, element) {
			$(element).addClass(option[index]);
		});
	});

Но есть такое чувство, что он мягко говоря "не очень". Посоветуйте как оптимизировать его.

Answer 1

[Алексей Уколов]

Я же вам здесь очень подробно ответил.
Принципы, которые там описаны, применяются одинаково хорошо и для ванильного js и для jquery.

var classes = ['item-id', 'item-title', 'item-price', 'delete-btn'];

$('#sf tr').each(function () {
    var $cell = $('<td>').append('<a class="add_item">Добавить в корзину</a>');
    
    $(this).append($cell);

    $(this).find('td').each(function (index, element) {
        $(element).addClass(classes[index]);
    });    
});

Или вот такой вариант, без итерации по строкам:

var classes = ['item-id', 'item-title', 'item-price', 'delete-btn'],
    $rows = $('#sf tr').filter(':gt(0)'),
    $link = $('<a>').addClass('add_item').text('Добавить в корзину'),
    $cell = $('<td>').append($link),
    $cells;

$rows.append($cell);

$cells = $rows.find('td');

$cells.each(function (index, cell) {
    $(cell).addClass(classes[index % classes.length]);
});

Интересные, кстати, получаются результаты сравнения скорости работы этих двух вариантов.

Comments

[keslo]

Последний вариант красив и понятен. Разница с моим первым вариантом и вашим просто огромна в плане восприятия. Спасибо.

[Алексей Уколов]

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

[keslo]

Алексей Уколов: да вот тоже пригляделся и не совсем понял как работает. Почему просто не использоваться index от each?

[Алексей Уколов]

keslo: Потому что $cells - это вообще все ячейки всех строк и индекс там может быть гораздо больше, чем количество классов. Поэтому мы в качестве индекса класса используем остаток от деления индекса ячейки на количество классов - по сути перебираем от 0 до 3: 0, 1, 2, 3, 0, 1, 2, 3 и т.д.
Попробуйте вывести в консоль index и index % classes.length на каждой итерации и сами все увидите.

[keslo]

Алексей Уколов: спасибо за развернутые ответы.

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

[Алексей Уколов]

keslo: на самом деле, как раз медленнее, именно это меня и удивило. Но разница там незначительная - даже в самом худшем случае вы сможете свою таблицу перерисовать 500 раз за секунду :)

[keslo]

Алексей Уколов: запустил у себя. В Сафари более быстродейственный первый вариант хотя оказался. Этак раза в два.

[Алексей Уколов]

keslo: в полтора :) Это графики на jsperf такие ущербные.
Но в данном случае важны не разы, а миллисекунды - что один, что другой вариант выполнятся за 1-2 мс, так что разницей в производительности между этими вариантами можно смело пренебречь.

[keslo]

Алексей Уколов: спасибо! Дали несколько весьма полезных советов. Буду использовать их в будущем.

Answer 2

[Андрей Буров]

Можно

$(this).add('<td></td>');
$(this).find('td:last').append('<a class="add_item">Добавить в корзину</a>');

заменить на:

$(this).add($('<td><a class="add_item">Добавить в корзину</a></td>'));

Comments

[keslo]

Да, пробовал так. Но добавляется только узел TD, а все что внутри TD пропадает.

[Андрей Буров]

keslo: упс, ошибка вышла... подправил ответ. $('HTMLCODE') - создаст все элементы.

[keslo]

Андрей Буров: все равно не вышло

[Алексей Уколов]

Вообще, вместо add должен быть append

[keslo]

Алексей Уколов: Да, с append работает. Но тут получается, что узел добавляется и в строку заголовка TH. Как в этом случае пропустить одну строку TR?

[Андрей Буров]

keslo: $('#sf tbody tr')

[Алексей Уколов]

keslo: если у вас tbody нет, то можно вот так - jsfiddle.net/koceg/m4pv7k4z

[Алексей Уколов]

Собственно, это будет работать даже если tbody есть. Но если он есть, то лучше фильтровать через него для наглядности.

[keslo]

Алексей Уколов: tbody небыло. Добавлю