如何从使用clone()复制的内容中删除类名

时间:2018-06-30 15:03:12

标签: javascript jquery html

我有一个网站,我们正在尝试设置一个继续循环similar to this stack answerWhat Lies Below website

在我们的网站中,我们还有些视差元素。视差元素都具有类名“ parallax”。当我克隆和附加克隆的内容时,它使用的是视差类名称,我需要摆脱它。所以我想我可以

JS

var clone = $("body").contents().clone();
var updatedClone = $(clone).find('.content').removeClass('parallax');
updatedClone.appendTo("body");
updatedClone.prependTo("body");

HTML

<body>
<main class"content">
    <div class="" style="margin-top:0%">
        <ul id="scene-header">
             <li class="layer" id="logo" style="text-align: center;"> <img src="dist/images/logoSVG.svg" alt="" class="parallax logo"> </li>
             <li class="layer" id="ice-hole" rotate-speed="4"> <img src="dist/images/snow_layer_03.png" alt="" class="parallax ice-hole"> </li>
         </ul>
     <div>
         <ul class="divider">
             <li class="" id="snow-layer"> <img class="snow-layer parallax" src="dist/images/snow_cap.png" style="width: 100%;"> </li>
             <li class="" id="ice-layer"> <img class="ice-layer parallax" src="dist/images/ice.png" class="rellax" style="width: 100%;"> </li>
             <li class="" id="darkice-layer"> <img class="darkice-layer parallax" src="dist/images/darkice.png" style="width: 100%;"> </li>
             <li class="" id="backgroundcolor-layer"></li>
         </ul>
     </div>
     </div>
</main>
</body>

但是网站上的附加内容仍在添加“视差”类名称。我忘记了什么简单的事情?

2 个答案:

答案 0 :(得分:0)

在removeClass函数的类名中不要包含句点。

varupdatedClone = $(clone).find('。content')。removeClass('parallax');

https://api.jquery.com/removeclass/

答案 1 :(得分:0)

clone()返回jQuery对象,因此您可以使用它来查找和删除类

尝试一下:

var clone = $('body').find('.content').clone();
clone.find('.parallax').removeClass('parallax'); // Find all content with class parallax and remove class
clone.appendTo('body');
//clone.prependTo('body');
.parallax {
  border: 5px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main class="content">
    <div class="" style="margin-top:0%">
        <ul id="scene-header">
             <li class="layer" id="logo" style="text-align: center;"> <img src="dist/images/logoSVG.svg" alt="" class="parallax logo"> </li>
             <li class="layer" id="ice-hole" rotate-speed="4"> <img src="dist/images/snow_layer_03.png" alt="" class="parallax ice-hole"> </li>
         </ul>
     <div>
         <ul class="divider">
             <li class="" id="snow-layer"> <img class="snow-layer parallax" src="dist/images/snow_cap.png" style="width: 100%;"> </li>
             <li class="" id="ice-layer"> <img class="ice-layer parallax" src="dist/images/ice.png" class="rellax" style="width: 100%;"> </li>
             <li class="" id="darkice-layer"> <img class="darkice-layer parallax" src="dist/images/darkice.png" style="width: 100%;"> </li>
             <li class="" id="backgroundcolor-layer"></li>
         </ul>
     </div>
     </div>
</main>