Question

我试图删除＆＃34; </div><div class="product-list_row">＆＃34;的所有实例并用＆＃34; ＆＃34;替换它。但我没有运气让这个工作。

我一直在尝试各种各样的解决方案，其中一些我无法完成所有工作，其他人只会做第一次。

我无法使用正则表达式解决方案，因为这是在我的Shopify网站上，而且他们的流媒体代码与正则表达式无关。

我一直在使用它：

$(document).ready(function(){

    $('.product-list').html(function(index,html){
      return html.replace('</div><div class="product-list_row">', '<!-- so cool -->');
    });

})


<div class="product-list">              
  <div class="product-list_row">
    <div class="product-list_item">1</div>
    <div class="product-list_item">2</div>
    <div class="product-list_item">3</div>
  </div>
  <div class="product-list_row">
    <div class="product-list_item">4</div>
    <div class="product-list_item">5</div>
    <div class="product-list_item">6</div>
  </div>
  <div class="product-list_row">
    <div class="product-list_item">7</div>
    <div class="product-list_item">8</div>
    <div class="product-list_item">9</div>
  </div>  
</div>

应该是这样的：

<div class="product-list">              
  <div class="product-list_row">
    <div class="product-list_item">1</div>
    <div class="product-list_item">2</div>
    <div class="product-list_item">3</div>
    <!-- removed -->
    <div class="product-list_item">4</div>
    <div class="product-list_item">5</div>
    <div class="product-list_item">6</div>
    <!-- removed -->
    <div class="product-list_item">7</div>
    <div class="product-list_item">8</div>
    <div class="product-list_item">9</div>
  </div>  
</div>

Codepen：https://codepen.io/jonnyplow/pen/YeKNRj

有什么想法吗？

Answer 1

这是因为</div>和<div class="product-list_row">

之间有空格

试试这个：

＆＃13;

$(document).ready(function(){

    $('.product-list').html(function(index,html){
      return html.replace(/<\/div>\s+<div class="product-list_row">/g, '<!-- so cool -->');
    });

})

＆＃13;

.product-list_row{
  margin: 10px 0;
  background: #eee;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-list">              
  <div class="product-list_row">
    <div class="product-list_item">1</div>
    <div class="product-list_item">2</div>
    <div class="product-list_item">3</div>
  </div>
  <div class="product-list_row">
    <div class="product-list_item">4</div>
    <div class="product-list_item">5</div>
    <div class="product-list_item">6</div>
  </div>
  <div class="product-list_row">
    <div class="product-list_item">7</div>
    <div class="product-list_item">8</div>
    <div class="product-list_item">9</div>
  </div>  
</div>

＆＃13;

至于仅替换第一次出现的原因，请阅读此有用的document

Answer 2

使用正则表达式并不像使用dom方法那样可靠

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

var $rows = $('.product-list .product-list_row'),
  $rowsToEmpty = $rows.slice(1);

$rows.first().append($rowsToEmpty.children())
$rowsToEmpty.remove()

.product-list_row {
  border: 1px solid #ccc
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-list">
  <div class="product-list_row">
    <div class="product-list_item">1</div>
    <div class="product-list_item">2</div>
    <div class="product-list_item">3</div>
  </div>
  <div class="product-list_row">
    <div class="product-list_item">4</div>
    <div class="product-list_item">5</div>
    <div class="product-list_item">6</div>
  </div>
  <div class="product-list_row">
    <div class="product-list_item">7</div>
    <div class="product-list_item">8</div>
    <div class="product-list_item">9</div>
  </div>
</div>

Answer 3

执行此操作的最佳方法是使用内置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">');
});

＆＃13;

$(document).ready(function() {
  $('.product-list_item').unwrap();
  $(".product-list").wrapInner('<div class="product-list_row">');
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-list">

  <div class="product-list_row">
    <div class="product-list_item">1</div>
    <div class="product-list_item">2</div>
    <div class="product-list_item">3</div>
  </div>
  <div class="product-list_row">
    <div class="product-list_item">4</div>
    <div class="product-list_item">5</div>
    <div class="product-list_item">6</div>
  </div>
  <div class="product-list_row">
    <div class="product-list_item">7</div>
    <div class="product-list_item">8</div>
    <div class="product-list_item">9</div>
  </div>

</div>

＆＃13;

Answer 4

＆＃13;

var newDiv=document.getElementById('product').innerHTML;
  var unwanted='</div><div class="product-list_row">';
  var comment='<!-- so cool -->';
  newDiv = newDiv.split(unwanted).join(comment);
  document.getElementById('product').innerHTML=newDiv;

＆＃13;

<div class="product-list" id="product">

＆＃13;

添加id =＆＃34;产品＆＃34;对于class =＆＃34; product-list＆＃34;

Answer 5

$(document).ready(function() {
var length = $('.product-list .product-list_row').size();
$('.product-list .product-list_row').each(function(index, obj) {
if (length - 1 != index)
    $(this).after('<!-- so cool -->');

    });

})

Answer 6

我不得不改变我的想法。而不是从硬编码元素包装器开始并尝试删除它们并替换为另一个元素（注释），而不是我应该想到每个X元素添加包装div。这就是我最终指的是得到我需要的东西 - Wrap and unwrap divs responsively。谢谢你的努力！

替换所有html元素的实例

6 个答案: