Javascript 替换html元素的所有实例

我正在尝试删除

的所有实例，并将其替换为

。但我没办法让它发挥作用

我一直在尝试各种各样的解决方案，有些我根本无法实现，而另一些则只是第一次尝试

我也不能使用正则表达式解决方案，因为这在我的Shopify网站上，而且他们的液态代码与正则表达式不兼容

我一直在用这个：

$（文档）.ready（函数（）{
$（'.product list'）.html（函数（索引，html）{
返回html.replace（“”，”）；
});
})

。产品列表{
显示：表格；
宽度：100%；
}
.product-list_行{
显示：表格行；
}
.product-list_项目{
显示：内联块；
@媒体屏幕和屏幕（最小宽度：1000px）{
显示：表格单元格；
}
}

1.
2.
3.
4.
5.
6.
7.
8.
9

这是因为

和

请尝试以下方法：

$（文档）.ready（函数（）{
$（'.product list'）.html（函数（索引，html）{
返回html.replace（/\s+/g'，）；
});
})

.product-list\u行{
利润率：10px0；
背景：#eee；
}

1.
2.
3.
4.
5.
6.
7.
8.
9

这是因为

和

请尝试以下方法：

$（文档）.ready（函数（）{
$（'.product list'）.html（函数（索引，html）{
返回html.replace（/\s+/g'，）；
});
})

.product-list\u行{
利润率：10px0；
背景：#eee；
}

1.
2.
3.
4.
5.
6.
7.
8.
9

使用正则表达式远不如使用dom方法可靠

将子元素移动到第一行，并在清空后移除整个容器

var$rows=$（'.product list.product-list_row'），
$rowsToEmpty=$rows.slice（1）；
$rows.first（）.append（$rowsToEmpty.children（））
$rowsToEmpty.remove（）

.product-list\u行{
边框：1px实心#ccc
}

1.
2.
3.
4.
5.
6.
7.
8.
9

使用正则表达式远不如使用dom方法可靠

将子元素移动到第一行，并在清空后移除整个容器

var$rows=$（'.product list.product-list_row'），
$rowsToEmpty=$rows.slice（1）；
$rows.first（）.append（$rowsToEmpty.children（））
$rowsToEmpty.remove（）

.product-list\u行{
边框：1px实心#ccc
}

1.
2.
3.
4.
5.
6.
7.
8.
9

最好的方法是使用内置的jquery方法

unwrap

（删除父元素）和

wrapInner

将父元素添加到子元素中。然后javascript就变得简单了

$(document).ready(function() {
  $('.product-list_item').unwrap();
  // This line is to put one single product-list_row around the entire thing
  $(".product-list").wrapInner('<div class="product-list_row">');
});

$（文档）.ready（函数（）{
$（'.product-list_item'）.unwrap（）；
//这一行是在整个东西周围放一行产品列表
$（“.productlist”）.wrapInner（“”）；
});

$（文档）.ready（函数（）{
$（'.product-list_item'）.unwrap（）；
$（“.productlist”）.wrapInner（“”）；
})

1.
2.
3.
4.
5.
6.
7.
8.
9

最好的方法是使用内置的jquery方法

unwrap

（删除父元素）和

wrapInner

将父元素添加到子元素中。然后javascript就变得简单了

$(document).ready(function() {
  $('.product-list_item').unwrap();
  // This line is to put one single product-list_row around the entire thing
  $(".product-list").wrapInner('<div class="product-list_row">');
});

$（文档）.ready（函数（）{
$（'.product-list_item'）.unwrap（）；
//这一行是在整个东西周围放一行产品列表
$（“.productlist”）.wrapInner（“”）；
});

$（文档）.ready（函数（）{
$（'.product-list_item'）.unwrap（）；
$（“.productlist”）.wrapInner（“”）；
})

1.
2.
3.
4.
5.
6.
7.
8.
9

为

class=“产品列表”

添加

id=“产品”

。然后你可以做：

var newDiv=document.getElementById（'product'）.innerHTML；
var=''；
var注释=“”；
newDiv=newDiv.split（不需要的）.join（注释）；
document.getElementById（'product'）。innerHTML=newDiv
为
class=“产品列表”
添加
id=“产品”
。然后你可以做：


var newDiv=document.getElementById（'product'）.innerHTML；
var=''；
var注释=“”；
newDiv=newDiv.split（不需要的）.join（注释）；
document.getElementById（'product'）。innerHTML=newDiv
$（文档）.ready（函数（）{
变量长度=$（'.product list.product-list_行'）.size（）；
$（'.product list.product-list_行'）。每个（函数（索引，obj）{
如果（长度-1！=索引）{
$（本）。在（''）之后；
}
});
})
$（文档）.ready（函数（）{
变量长度=$（'.product list.product-list_行'）.size（）；
$（'.product list.product-list_行'）。每个（函数（索引，obj）{
如果（长度-1！=索引）{
$（本）。在（''）之后；
}
});
})
我不得不改变我的想法。与其从硬编码的元素包装开始，尝试删除它们并替换为另一个元素（注释），相反，我应该考虑每隔X个元素添加包装div。这就是我最终想要得到的东西-。谢谢你的努力
 我不得不改变我的想法。与其从硬编码的元素包装开始，尝试删除它们并替换为另一个元素（注释），相反，我应该考虑每隔X个元素添加包装div。这就是我最终想要得到的东西-。谢谢你的努力
 这看起来是一个很好的解决方案，但是Shopify的液体显然不适用于regex。尽管如此，还是要感谢您的解决方案