使用jQuery清除多个div

Question

快速问题。如果我想一次性清除多个具有相同类的div，是否有jQuery的快捷方式可以做到这一点？我尝试了$('.clearit').empty();，但似乎根本不起作用（没有一个具有该类的div被清除）。我是不是做错了，还是这个方法就不起作用？让我知道，我还尝试了$('.clearit').html('');。此外，我还有其他代码与它一起在jquery中运行，其他所有内容都按预期运行。我调试了代码，似乎函数成功执行并继续进行，但div内容未被清除。以下是div的示例：

<center><div class="clearit" id="container2">Loading the player ...</div></center>
</li>
<li>
<center><div class="clearit" id="container3">Loading the player ...</div></center>
</li>
<li>  
<center><div class="clearit" id="container4">Loading the player ...</div></center>

这里是一个处理程序的代码。请注意，除了 $('.clearit').html(''); 之外，其中的所有内容都有效。

$('.thumbNav li a').click(function(){
    $('.clearit').html('');


var str = $(this).html();
var pattern = /[0-9]+/g;
var matches = str.match(pattern);
var myInteger = parseInt(matches);
//variable for player
var container = "container"+myInteger;
var what = 'skill'+myInteger;
var location = "https://aliahealthcare.com/videofetcher.php?id=skill"+myInteger;
player(container,what,location);  

$('#'+what).attr('selected', 'selected');   


    });

感谢任何还在帮助我的人！我已经修改了网站，所以您不再需要登录即可进入，这样您就可以亲自看到它的运行情况。请使用上面的代码作为查找JavaScript的参考。（它全部位于vid.php中）谢谢

https://aliahealthcare.com/vid.php

我刚刚发现了一些有趣的事情。上面的li是在id为slider的ul中的一部分。当我执行$('#slider').html('');或$('#slider').empty();时，它可以工作，但会清除所有的div，因此加载在这些div中的播放器不会加载。我所需要做的只是清除播放器，这样就不会同时运行多个播放器。

- Osman

---

http://jsfiddle.net/lollero/HwRfW/ 这不是很复杂。也许你没有正确加载jquery，或者像Bryan Downing在他的答案中所说的那样，在代码中写入了准备就绪的文档示例 http://jsfiddle.net/lollero/HwRfW/1/。 - Joonas

此代码与其他jquery代码一起运行，所有其他代码似乎都正常运行。 - Osman

尝试调试您的代码，很可能是因为元素未定义而无法正常工作。在代码中的任何位置放置“debugger;”，并在打开Firebug的情况下运行代码。 - Ashwin

演示很好，谢谢！但是它对我不起作用。我在处理程序中放置了$('.clearit').html('')和其他代码，似乎一切都正常，除了这个问题，调试器也没有帮助，因为它运行了那一行，但divs从未被清除。 - Osman

点击此处以查看实际页面 https://aliahealthcare.com/vid.php - Osman

Answer 1

你的问题很可能是在DOM加载之前运行了该命令。在StackOverflow中打开控制台窗口并运行$("div").empty();。所有内容都会消失！

- Bryan Downing

---

当有人点击页面上的某些东西，例如滑块上的下一个按钮时，我会清除div。 - Osman

您应该发布事件处理程序的代码，并检查codeparadox答案中概述的项目。 - Bryan Downing

Answer 2

请在此处查看有效的演示：http://jsfiddle.net/TxR8K/ 从您提供的代码中更新：http://jsfiddle.net/TxR8K/1/ 顺便说一下，示例中缺少无序列表标签，即ul。 进一步更新经与OP讨论后——我们也发现——播放器实际上并不是div中的一部分，因此他/她知道需要做什么，并为进一步修复清除了道路：）

这应该就可以了。

   $('.clearit').html('');

- Tats_innit

---

@user860869 :) 别担心：我用你的代码又做了一个演示：http://jsfiddle.net/TxR8K/1/ - Tats_innit

嗨，@user860869，没问题，我们会修复它。你能否复制粘贴你的代码并在这里粘贴你的jsfiddle :) 我要出去快速抓取一下，回来后会看一下，再见！ - Tats_innit

@user860869，很酷，我回来了 - 所以在您的点击事件中：$('.thumbNav li a').click(function() {，类.thumbNav在您页面的源代码中看不到？这可能是问题所在 :) 因为点击事件没有正确绑定。 - Tats_innit

这是底部的数字1-25（因此请单击小标签）。 - Osman

我也将代码放在其他处理程序中，当我点击那里时，该处理程序中的其他代码也能正常工作。 - Osman

Answer 3

您的代码应该正常工作。

请检查以下内容：

• 将您的代码放置在$(document).ready(function() {...})中，简写为$(function() {..})

• 正确加载jQuery库

• 没有任何拼写错误

如果一切正常，那么您的代码应该可以正常工作。

如果不行，请尝试使用@Tats_innit的答案。

根据您的编辑

我仍然认为您的代码应该可以正常工作。

但如果不行，您可以尝试这个方法：

$('div[id^=container].clearit').empty();

DEMO

- thecodeparadox

---

再次调试器会执行这行代码，没有错误，并继续执行。但是div保留了它们的内容。谢谢。 - Osman

我一直在想可能有一个错别字，但既然控制台没有显示出来，而且 OP 也没有报告这个问题，我认为这只是一个正确定位元素的问题，但你的新编辑似乎有点过度了。 - Joonas

@user860869 我认为你可能想要使用console.log()来确保找到正确的元素，例如console.log( $('.thumbNav li a') )，同样适用于.clearit，并查看它们是否存在。 - Joonas

Thecodeparadox，你的目标是具有以“container”开头的ID和类“clearit”的div元素，但这绝不会使得仅针对.clearit进行定位无法奏效的情况变得更容易或有效。让定位更加严格肯定不会有所帮助... - Joonas

我发布了一个链接到该页面。请查看 https://aliahealthcare.com/vid.php 谢谢！ - Osman