СУШКА JQuery FizzBuzz Упражнение

Question

Я столкнулся с проблемой, когда я не могу сохранить повторяющиеся строки кода в переменные и не знаю почему. Кроме того, я пытаюсь установить новую таблицу рядом с текущей, а не под ней или над ней, но я не смог манипулировать DOM, чтобы отразить это. Любая помощь будет принята с благодарностью.

(function($) {
$.fn.fizzBuzz = function() {
 var newTable = $(this).clone();
 var myTable = $(this.children().last().children());
 // var newTableValues = newTable.children().last().children()[i].firstChild.innerHTML;
 // var parseData = (parseInt(myTable[i].firstChild.innerHTML)

 for (var i = 0; i < myTable.length; i++) {

  if (parseInt(myTable[i].firstChild.innerHTML) % 15 === 0) {
    newTable.children().last().children()[i].firstChild.innerHTML  = "FizzBuzz";

  } else if (parseInt(myTable[i].firstChild.innerHTML) % 3 === 0) {
    newTable.children().last().children()[i].firstChild.innerHTML = "Fizz";

  } else if (parseInt(myTable[i].firstChild.innerHTML) % 5 === 0) {
    newTable.children().last().children()[i].firstChild.innerHTML = "Buzz";

  } else {
    newTable.children().last().children()[i].firstChild.innerHTML = "Uncool";
 }
  newTable.insertAfter('div');
}
}
})(jQuery)

$(".fizzer").fizzBuzz();

jsfiddle

Answer 1

(function($) {
    $.fn.fizzBuzz = function() {
        var newTable = $(this).clone();
        $("tr > td", newTable).each(function(i, e) {
            var i = parseInt(e.innerHTML, 10);
            var f = (i % 3 == 0 ? "Fizz" : "") + (i % 5 == 0 ? "Buzz" : "");
            e.innerHTML = f ? f : "Uncool";
        });
    return newTable;
}
})(jQuery);

var newTable = $(".fizzer").fizzBuzz();
$("#main").append(newTable);

Это не становится намного суше, чем это.
(1) Ваша новая таблица является копией существующей таблицы. Как только вы клонировали свой существующий стол, оставьте его в покое.

(2) Избегайте всех вещей детей / последних / и т.д., если можете; по возможности используйте CSS-селекторы.

(3) Если вы зависите от чтения чисел из JSON или HTML, всегда запускайте его через parseInt ()

(4) В jQuery есть много полезных средств для перебора объектов DOM, которые превосходят все, что вы можете написать, в основном потому, что, поскольку вы ничего не пишете, вы не вносите ошибок. Вместо цикла for () узнайте, как each () и map () могут сэкономить ваше время и разочарование. Узнайте разницу между jQuery.each() и Array.each(), особенно, и их эквивалентами.map ().

(5) Используя jQuery "каждую" функцию с CSS-селекторами, я получаю доступ к точной цели, которая меня интересует. Я могу проанализировать его и заменить его содержимое (все это происходит в копии).

(6) Поскольку я создаю новый объект DOM, а не манипулирую им в функции, я возвращаю его и позволяю пользователю решать, где его разместить.

(7) Если у меня нет конкретной документации, необходимой для того, чтобы помочь будущим сопровождающим понять код, единственные переменные, которые я когда-либо объявляю, - это переменные, которые я использую более одного раза.

(8) Два экземпляра newTable полностью независимы. Функция внутри моей функции fizzBuzz ограничена и не влияет на внешнюю или наоборот. Всегда используйте var,