jquery - 从 div 内容中仅删除 <br/>

Question

我正在使用 WooCommerce 并且必须包括

    <br> 

在产品名称中。

这个中断现在显示为

    <br /> 

在 .woocommerce-breadcrumb 中。

这是面包屑的样子:

    <nav class="woocommerce-breadcrumb" itemprop="breadcrumb">
        <a href="http://localhost/WP">Home</a>
        &nbsp;&#47;&nbsp;
        <a href="http://localhost/WP/product-category/guitars/">Guitars</a>
        &nbsp;&#47;&nbsp;
        <a href="http://localhost/WP/product-category/guitars/electric-guitars/">Electric Guitars</a>
        &nbsp;&#47;&nbsp;
        <a href="http://localhost/WP/product-category/guitars/electric-guitars/fender-electric-guitar/">Fender-123-electric-guitar</a>
        &nbsp;&#47;&nbsp;Fender American Standard&lt;br /&gt; Stratocaster Sienna Sunburst
    </nav>

如您所见，导航栏之前的最后一行包含在浏览器中字面上看起来像

目前我正在尝试摆脱它，但它破坏了面包屑的功能!

  $(function() {
      $( '.woocommerce-breadcrumb' ).text(function(_,txt) {
          return txt.split('<br />').shift();
      });
  });  

有什么建议吗？

谢谢!

Answer 1

text 方法是破坏性的，即它会重置元素的内容。您可以遍历 childNodes 并修改 textNode 的 nodeValue。

$( '.woocommerce-breadcrumb' ).contents().each(function() {
    if ( this.nodeType === 3 ) {
       this.nodeValue = this.nodeValue.replace(/<br \/>/g, '');
    }
});

http://jsfiddle.net/zb8j43cu/