Question

我需要使用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;
});

Answer 1

在循环外部取div html字符串
您可以删除所有变量
缓存this上下文
return最后没有必要

代码：

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"));
});

如果要迭代所有以element开头的类的元素，您也可以按如下方式缩短代码：

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

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

Answer 2

看起来普通选择器可以减轻负载。

$(".container .row").each(function (index) {
    var newRow = jQuery(this).find(".elementA p, .elementB p, .elementC p, .elementD p");
    $("<div>Test 1</div>").insertBefore(newRow);
    return;
});

如何通过循环使这个jQuery函数更高效？

2 个答案: