Question

我正在尝试检查body标签以查看是否具有特定的类，如果没有，则删除特定的SVG元素。如果重要的话，这些SVG元素位于标头中。我已经尝试了许多变体，但还是做不到。

这是我最近的尝试：

编辑：添加了HTML

<body class="header-layout-fourteen">
    <header>
       <svg class="wave" viewBox="0 0 960 80" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M 0,61.61878 C 428.81164,128.05787 670.62027,-50.721079 960,14.619851 L 960,80 0.51812022,80 Z" />
      </svg>

      <svg class="open-book" viewBox="0 0 960 80" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M 885.51726,0 A 405.62125,84.746301 0 0 0 480.73447,80 L 960,80 960,1.4938023 A 405.62125,84.746301 0 0 0 885.51726,0 Z M 74.48273,0.52138 A 405.62125,84.746301 0 0 0 0,2.0152033 L 0,80 478.66477,80 A 405.62125,84.746301 0 0 0 74.48273,0.52138 Z" />
      </svg>

      <svg class="mountains" viewBox="0 0 960 80" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
       <polygon transform="scale(9.6,0.8)" points="72,20 85,100 95,50 100,80 100,100 0,100 0,0 15,100 33,21 45,100 50,75 55,100 " />
      </svg>
    </header>
    <main>Main Content</main>
    <footer>Main Footer
       <script>
           $( document ).ready(function() {
               if(!$('body').hasClass('header-layout-fourteen')) {
                   $('.site-header').remove('svg.wave'),
                   $('.site-header').remove('svg.open-book'),
                   $('.site-header').remove('svg.mountains')
                }
            });
        </script>
    <footer>
</body>

Answer 1

这里有两个问题。首先，使用.时应在选择器上删除hasClass()前缀。其次，remove()的参数对所选元素执行 filter ，而不是 find 操作。因此，您需要对此进行修改：

if (!$('body').hasClass('header-layout-fourteen')) {
  $('.site-header').find('svg.clouds, svg.mountains, svg.waves').remove();
}

Answer 2

目前尚不清楚身体何时拥有此类或不具有此类。但我建议使用以下代码：

$(function() {
  if (!$('body').hasClass('header-layout-fourteen')) {
    $('header svg.wave').remove();
    $('header svg.open-book').remove();
    $('header svg.mountains').remove();
  }
});

首先，该条件是if语句表明如果<body>没有类'header-layout-fourteen'，则它成立。如果它在您的HTML上运行，它将始终为false（body.hasClass（'header-layout-fourteen'）== true ，!将其设置为false）。

第二，我看不到任何带有“ site-header”类的元素，因此我猜您是指<header>或$("header")对象。由于标题包含特定类别的SVG元素，因此您应该创建更特定的选择器：

$('header svg.wave')
$('header svg.open-book')
$('header svg.mountains')

然后在所选项目上使用.remove()。

$(function() {
  if (!$('body').hasClass('header-layout-fourteen')) {
    $('header svg.wave').remove();
    $('header svg.open-book').remove();
    $('header svg.mountains').remove();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Example 1
<div class="body-content header-layout-fourteen">
  <header>
    <svg class="wave" viewBox="0 0 960 80" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M 0,61.61878 C 428.81164,128.05787 670.62027,-50.721079 960,14.619851 L 960,80 0.51812022,80 Z" />
      </svg>
    <svg class="open-book" viewBox="0 0 960 80" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M 885.51726,0 A 405.62125,84.746301 0 0 0 480.73447,80 L 960,80 960,1.4938023 A 405.62125,84.746301 0 0 0 885.51726,0 Z M 74.48273,0.52138 A 405.62125,84.746301 0 0 0 0,2.0152033 L 0,80 478.66477,80 A 405.62125,84.746301 0 0 0 74.48273,0.52138 Z" />
      </svg>
    <svg class="mountains" viewBox="0 0 960 80" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
       <polygon transform="scale(9.6,0.8)" points="72,20 85,100 95,50 100,80 100,100 0,100 0,0 15,100 33,21 45,100 50,75 55,100 " />
      </svg>
  </header>
  <main>Main Content</main>
  <footer>Main Footer<footer>
</div>

在示例中，<body>没有'header-layout-十四'类，并且已删除项目。如果在if中将选择器更改为$(".body-content")，则项目保留。

希望有帮助。

检查特定类，如果不存在，则删除特定元素

2 个答案: