时间戳

首页 > 解决方案 > Jquery - 逻辑不应影响特定 ID

javascript - Jquery - 逻辑不应影响特定 ID

问题描述

在 HTML/JS 下面用于将 h2 更改为 h3 的逻辑。

但是，它不应该影响“testelement”DIV ID 中的 H2。

某些此脚本未按预期工作的方式。请让我知道如何解决这个问题？

谢谢

if($('#testelement').length){
  $('body').find('h2').replaceWith(function() {
    return '<h3>' + $(this).text() + '</h3>';
  });
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="testelement">
  <h1>Headline 1</h1>
  <h2>Headline 2</h2>
  <h3>Headline 3</h3>
</div>
<h1>Test Headline 1</h1>
<h2>Headline 2</h2>

标签： javascriptjquery

解决方案

只需指出您不想受到影响的元素。

.not('#testelement h2')

来自w3schools

: not()选择器选择除指定元素之外的所有元素。

if($('#testelement').length){
  $('body').find('h2').not('#testelement h2').replaceWith(function() {
    return '<h3>' + $(this).text() + '</h3>';
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="testelement">
  <h1>Headline 1</h1>
  <h2>Headline 2</h2>
  <h3>Headline 3</h3>
</div>
<h1>Test Headline 1</h1>
<h2>Headline 2</h2>

推荐阅读