• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • replaceAll()

    用集合的匹配元素替换每个目标元素。

    .replaceAll(target)

    target类型: Selector。一个选择器字符串,jQuery对象,DOM元素,或者元素数组,包含哪个元素被替换。

    .replaceAll().replaceWith()功能一样,但是目标和源相反。

    请看下面的HTML:

    <div class="container">
      <div class="inner first">Hello</div>
      <div class="inner second">And</div>
      <div class="inner third">Goodbye</div>
    </div>
    

    我们可以创建一个元素然后用它替换其它元素:

    $('<h2>New heading</h2>').replaceAll('.inner');
    

    结果如下:

    <div class="container">
      <h2>New heading</h2>
      <h2>New heading</h2>
      <h2>New heading</h2>
    </div>
    

    或者,我们也可以选择一个元素用来替换其它的:

    $('.first').replaceAll('.third');
    

    DOM结构的结果:

    <div class="container">
      <div class="inner second">And</div>
      <div class="inner first">Hello</div>
    </div>
    

    从这个例子可以看出,用来替换的元素从老地方移到新位置,而不是复制。

    例子

    将所有段落换成粗体字

    <!DOCTYPE html>
    <html>
    <head>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <p>Hello</p>
      <p>cruel</p>
      <p>World</p>
    <script>$("<b>Paragraph. </b>").replaceAll("p");</script>
     
    </body>
    </html>
    

    下篇:replaceWith()