如何通過循環使此jQuery函數更有效？

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

1. 將div html字符串帶出循環
2. 您可以刪除所有變量
3. 緩存this上下文
4. 最后沒有必要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;
});