Question

我的代码下面使用each（）实际上可以很好地工作，但它用于循环比使用each（）更好吗？用于循环将减少与每个（）的时间负载比较; ？因为将来我还会为数据类型添加更多。不仅意味着c1，c2，还会有更多的类型即将到来，

我的HTML，

<div class ="box red" data-type="c1" data-title="c1 content" id="cp-1">
  <div class= "title">c1 content</div>
</div>
<div class ="box green" data-type="c1" data-title="c2 content" id="cp-2">
  <div class= "title">c2 content</div>
</div>

javascript：

 $(document).ready(function() {
        var cp = $('.box');
        //  Unique Id for each
        var idCp = 0;
        for (var i = 0; i < cp.length; i++) 
        {
            idCp++;
            cp[i].id = "cp-" + idCp;
        }

           cp.each(function() {
                var cp = $(this);
                var cpTitle = cp.attr("data-title") + "";

                // different Data type
                if (cp.data('type') == "c1") 
                {
                    cp.addClass('red').css(
                        {
                            "background-color" : "red",
                            "padding": "20px", 
                            "display": "table"}
                        );
                    cp.append('<div class="title">' + cpTitle + '</div>');
                } 

                else if (cp.data('type') == "c2") 
                {
                    cp.addClass('green').css(
                        {
                            "background-color" : "green", 
                            "padding": "20px", 
                            "display": "table"}
                        );
                    cp.append('<div class="title">'+ cpTitle + '</div>');
                } else {
                    return false;
                }
            });
        });

Answer 1

通常，本机语言结构比库函数更快。因此，在性能方面，你最好使用for循环，但除非你有几千个要迭代的元素，否则两者之间的区别几乎不会引人注意。

在我看来，无论你是使用each还是for循环，你的代码都无效。以下是我只使用一个for循环而不是for循环和each函数调用来编写它的方法：

<强>段：

/* ----- JavaScript ----- */
$(document).ready(function() {
  var
    /* Cache the boxes and create a data object mapping the types to their classes. */
    cp = $(".box"),
    types = {
      c1: "red",
      c2: "green"
    };
    
  /* Iterate over every box. */
  for (var i = 0; i < cp.length; i++) {
    var
      /* Cache the current box and its type. */
      box = $(cp[i]),
      type = box.data("type");
      
    /* Give the box a unique incremental id. */
    cp[i].id = "cp-" + (i + 1);
    
    /* Check whether the type exists in the types object. */
    if (type in types) {    
      /* Add the correct class to the box based on its data type. */
      box.addClass(types[type]);
      
      /* Create a title for the box. */
      box.append("<div class='title'>" + box.data("title") + "</div>");
    }
    else return false;
  }
});

/* ----- CSS ----- */
.box {
  display: table;
  padding: 20px;
}

.red {background-color: red}
.green {background-color: green}

<!----- HTML ----->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="box red" data-type="c1" data-title="c1 content" id="cp-1"></div>
<div class ="box green" data-type="c1" data-title="c2 content" id="cp-2"></div>

注意：

编写代码时，您应该在代码性能和代码可读性之间取得平衡，因为慢速代码可以更快地调整，但难以维护的代码非常难以维护。

Here是一个很好的答案，概述了理想的方法（在我看来）在可读性和性能困境方面。我还添加了一些好的答案，旨在比较each和for循环的使用：

$.each() vs for() loop - and performance (Answer 1)

$.each() vs for() loop - and performance (Answer 2)

Answer 2

您可以在下面查看说明和效果比较。

Speed Question jQuery.each vs. for loop

我也检查了不同的测试。您应该知道的是，通常，本机函数运行得更快，因为库已经在使用它们并执行更复杂的操作。但在某些测试用例中，$.each()可能比for循环更快。

用于代替each（）;

2 个答案: