Question

在使用jQuery UI的show()上使用动画时，添加了.ui-effects-wrapper类。如何删除.ui-effects-wrapper类？

＆＃13;

$('.desc').eq(0).show();
$('.tab-child').hover(function(){
  $('.desc').hide();
  $('.desc').eq($(this).index()).show("shake", 4000);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="tab">
    <div class="tab-child">One</div>
    <div class="tab-child">Two</div>
    <div class="tab-child">Three</div>
    <div class="tab-child">Four</div>
</div>
<div class="content">
    <div class="desc" style="display: none;"> ONE: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare neque at velit fermentum, vulputate tempus
        lorem vulputate. Quisque eu ipsum venenatis, posuere tortor ut, maximus neque. Aenean tempor justo leo. Vestibulum
        auctor, urna ut scelerisque rutrum, sem arcu egestas ipsum, ut maximus magna turpis ut nunc. Nulla rutrum velit
        nisi, ac feugiat est commodo eu. Maecenas eget velit urna. Mauris posuere ex quis dictum commodo. Donec porta
        lobortis turpis, eget iaculis diam tincidunt at.
    </div>
    <div class="desc" style="display: none;"> TWO: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare neque at velit fermentum, vulputate tempus
        lorem vulputate. Quisque eu ipsum venenatis, posuere tortor ut, maximus neque. Aenean tempor justo leo. Vestibulum
        auctor, urna ut scelerisque rutrum, sem arcu egestas ipsum, ut maximus magna turpis ut nunc. Nulla rutrum velit
        nisi, ac feugiat est commodo eu. Maecenas eget velit urna. Mauris posuere ex quis dictum commodo. Donec porta
        lobortis turpis, eget iaculis diam tincidunt at.
    </div>
    <div class="desc" style="display: none;"> TREE: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare neque at velit fermentum, vulputate tempus
        lorem vulputate. Quisque eu ipsum venenatis, posuere tortor ut, maximus neque. Aenean tempor justo leo. Vestibulum
        auctor, urna ut scelerisque rutrum, sem arcu egestas ipsum, ut maximus magna turpis ut nunc. Nulla rutrum velit
        nisi, ac feugiat est commodo eu. Maecenas eget velit urna. Mauris posuere ex quis dictum commodo. Donec porta
        lobortis turpis, eget iaculis diam tincidunt at.
    </div>
    <div class="desc" style="display: none;"> FOUR: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare neque at velit fermentum, vulputate tempus
        lorem vulputate. Quisque eu ipsum venenatis, posuere tortor ut, maximus neque. Aenean tempor justo leo. Vestibulum
        auctor, urna ut scelerisque rutrum, sem arcu egestas ipsum, ut maximus magna turpis ut nunc. Nulla rutrum velit
        nisi, ac feugiat est commodo eu. Maecenas eget velit urna. Mauris posuere ex quis dictum commodo. Donec porta
        lobortis turpis, eget iaculis diam tincidunt at.
    </div>
</div>

＆＃13;

Answer 1

在我的评论中，我说＆＃34; @KiranShahi你应该做的是得到“ui-effects-wrapper＆＃39;并调用$ .replaceWith将div替换为自己的子项＆＃34;

我已在此实施：

https://jsfiddle.net/Lopkcjnt/3/

$('.ui').each(function() {
  let children = $(this).children();
  $(this).replaceWith(children);
})

然后＆＃39;展开＆＃39;

虽然方法可能更直观

https://api.jquery.com/unwrap/

由你决定。

Answer 2

如果这是您要从$（'。desc'）中删除wapper类的元素，请添加以下内容。

$('.desc').eq(0).show();

$('.tab-child').hover(function(){
  $('.desc').hide();
  $('.desc').eq($(this).index()).show("shake", 4000);
  $('.desc').removeClass('ui-effects-wrapper');
});

我在上面运行了你的代码并且我没有看到该类添加到任何地方但为效果运行添加的效果已经消失。

尽管如此，你可以在任何元素和你想要删除的任何类中使用removeClass()。

Answer 3

找到该包装器的子项并删除包装器。

$(".ui-effects-wrapper").children().unwrap();

如何使用jQuery删除某些选择器的包装器？

3 个答案: