如何使循環中的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

貌似正常的選擇器可以減少負載。

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

Answer 2

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。