替换 html 元素的所有实例

Question

我正在尝试删除</div><div class="product-list_row"> 的所有实例并将其替换为<!-- removed -->。但我没有运气让这个工作。

我一直在尝试各种解决方案，有些我根本无法工作，而其他人只会做第一个实例。

我也不能使用正则表达式解决方案，因为这是在我的 Shopify 网站上，而且他们的流动代码不适用于正则表达式。

我一直在用这个：

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

.product-list {
  display:table;
  width:100%;
}
.product-list_row {
  display:table-row;
}
.product-list_item {
  display:inline-block;
  @media screen and (min-width: 1000px) {
    display:table-cell;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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>

应该是这样的：

.product-list {
  display:table;
  width:100%;
}
.product-list_row {
  display:table-row;
}
.product-list_item {
  display:inline-block;
  @media screen and (min-width: 1000px) {
    display:table-cell;
  }
}

<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>

Answer 1

那是因为</div> 和<div class="product-list_row"> 之间有空格

试试这个：

$(document).ready(function(){

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

})

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

<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>

至于只替换第一次出现的原因，请看这篇有用的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">');
});

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

<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 4

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

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

为class="product-list" 添加id="product"。然后你可以这样做：

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;

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