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

$（“.container.row”）.each（函数（索引）{
第1行，
第2行，
第3行，
第4行，
新罗1，
纽罗2，
纽罗3，
新罗4；
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”）；
$（“测试1”）。插入之前（新行1）；
$（“测试1”）。插入之前（新行2）；
$（“测试1”）。插入之前（新行3）；
$（“测试1”）。插入之前（新行4）；
返回；
});

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

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

$（“.container.row”）.each（函数（索引）{
var newRow=jQuery（this）.find（“.elementA p、.elementB p、.elementC p、.elementD p”）；
$（“测试1”）。插入之前（纽罗）；
返回；
});

将

div

html字符串置于循环之外

您可以删除所有变量

缓存

此

上下文

不需要在末尾返回

代码：

---

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

elementX

将所有

element（X）

类设置为

element

，只需删除重复的代码行即可添加HTML示例？@AkshayKhandelwal这是一个示例，实际上是每个元素（X）是一个不同的类名。如果它是工作代码，您可能希望在…询问elementA或任何类是否可以成为jsut elementAn，我认为您需要一个each循环newRow@AkshayKhandelwal我认为这是不必要的。

[class^=element]

也会选择

.elementE

，如果他在document@guest271314你说得对。如果要迭代类以element开头的所有元素，请检查更新-

。这完全取决于DOM结构。另外，我相信OP希望迭代所有元素。为什么要从公共元素中删除元素？
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"));
});

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