删除没有特定课程的孩子

时间:2014-01-08 16:30:45

标签: jquery

我有这个HTML:

<div class="post-content">
    I have something to give away for free. Call
    <span class="togglers">
        <a class="toggler selected" href="#" title="change" style="display: inline;">me</a>
        <span class="divider" style="display: inline;">|</span>
        <a class="toggler" href="#" title="change" style="display: inline;">us</a>
    </span> 
    today and
    <span class="togglers">
        <a class="toggler" href="#" title="change" style="display: inline;">I'll</a>
        <span class="divider" style="display: inline;">|</span>
        <a class="toggler" href="#" title="change" style="display: inline;">we'll</a>
    </span>
    hand deliver it to your doorstep.
</div>

所以它看起来像这样:

I have something to give away for free.  Call [me|us] today and [I'll|we'll] hand deliver it to your doorstep.

然后用户可以选择“我”或“我们”,“我会”或“我们会”。一旦他们从每个组中选择一个单词,该单词的包含就会有一个“选定”的类。但是,我想只在每个span.togglers都有一个a.selected时做一些事情。我担心我已经找到了Javascript答案,但我不太了解Javascript以了解它是如何工作的。我怎么能用jQuery做到这一点?或者,我是否必须使用Javascript执行此操作?

2 个答案:

答案 0 :(得分:1)

如果您想要删除没有“选定”类的元素,只需使用jQuery:

$(".toggler").each(function(){
  if(!this.hasClass('selected')){
    this.remove();
  }
});

答案 1 :(得分:1)

要检查每个togglers是否有a.selected,您可以执行此操作:

if ($('.togglers').length == $('.toggler.selected').length) {
    $(".toggler:not('.selected')").remove(); //removes all .toggler tags that don't have the .selected class 
}

(我在此假设您的代码确保每.toggler只有一个.selected .togglers,否则您必须修改代码以检查每个.togglers单独地)