DRYing up jQuery FizzBuzz Exercise

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();

斯菲德尔

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((循环，了解每个((和map((如何节省你的时间和挫折。 了解 jQuery.each(( 和 Array.each(( 之间的区别，尤其是它们的 .map(( 等价物。

(5(通过使用jQuery的"each"函数和CSS选择器，我可以访问我关心的确切目标。 我能够分析它并替换它的内容(这一切都发生在副本中(。

(6(由于我正在构建一个新的DOM对象，而不是在函数中操作它，所以我返回它，并让用户决定把它放在哪里。

(7(除非我有特定的文档需要帮助未来的维护者理解代码，否则我唯一声明的变量是我多次使用的变量。

(8( newTable 的两个实例是完全独立的。 我的 fizzBuzz 函数内部的那个是作用域的，不会影响外部函数，反之亦然。 始终使用 var .