javascript - 如何通过循环使此jQuery函数更有效？

我需要使用jQuery查找元素，获取它们的嵌套段落，然后在此段落之前添加div。我有它的工作很好，但它是非常重复的代码，我想使它更有效和整理，但我不知道如何。
代码如下：

$(".container .row").each(function(index) {
    var row1,
        row2,
        row3,
        row4,
        newRow1,
        newRow2,
        newRow3,
        newRow4;

    row1 = jQuery(this).find(".elementA");
    row2 = jQuery(this).find(".elementB");
    row3 = jQuery(this).find(".elementC");
    row4 = jQuery(this).find(".elementD");

    newRow1 = row1.find("p");
    newRow2 = row2.find("p");
    newRow3 = row3.find("p");
    newRow4 = row4.find("p");

    $("<div>Test 1</div>").insertBefore(newRow1);
    $("<div>Test 1</div>").insertBefore(newRow2);
    $("<div>Test 1</div>").insertBefore(newRow3);
    $("<div>Test 1</div>").insertBefore(newRow4);

    return;
});

最佳答案

将divhtml字符串带出循环
可以删除所有变量
缓存上下文
this结束时不需要
代码：

var div = "<div>Test 1</div>";
$(".container .row").each(function (index) {
    var $this = jQuery(this);

    $(div).insertBefore($this.find(".elementA p"));
    $(div).insertBefore($this.find(".elementB p"));
    $(div).insertBefore($this.find(".elementC p"));
    $(div).insertBefore($this.find(".elementD p"));
});

如果要遍历类以return开头的所有元素，还可以按如下方式缩短代码：

var div = "<div>Test 1</div>";
$(".container .row [class^=element] p").each(function () {
    $(div).insertBefore($(this));
});

我还建议您对所有元素使用相同的类名，而不是element。

关于javascript - 如何通过循环使此jQuery函数更有效？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32653563/