Question

我有一组按钮，我可以动态添加按钮。我的选择看起来像这样：

$elements = [a.midToggle, a.menuToggle, a.ui-crumbs]

我想将此选择添加到现有控制组：

<div data-role="controlgroup" data-type="horizontal" class="dropZone">
   <a href="#" class="some">Some</a>
   <a href="#" class="midToggle">MidTog</a>
</div>

然而，在预先添加之前，我想从我的选择中删除控制组内已有的按钮，否则它们会在那里多次。

我是这样尝试的，但它根本不起作用：

// I have multiple controlgroups, so I need to add the buttons to all of them
$('.dropZone').each(function() {     

   var $first = $(this), 
   $buttons = $elements.clone();

   $buttons.each(function() {
     // check if class name on new button is already in controlgroup
     if ( $(this).is(".midToggle") && $first.find(".midToggle").length > 0 ) {
     $(this).remove();
         }
      if ( $(this).is(".menuToggle") && $first.find(".menuToggle").length > 0 ) {
     $(this).remove();
         }
      if ( $(this).is(".ui-crumbs") && $first.find(".ui-crumbs").length > 0 ) {
     $(this).remove();
         }
      });
 // append what's left
 $first.append( $buttons )

我认为我的 $按钮没有删除，但我不知道如何让它工作。我的三个if语句也有些蹩脚。有更好的方法吗？

修改
我不得不稍微修改一下解决方案，因为每个按钮都有多个类，所以我不能简单地检查 attr（＆＃39; class＆＃39;）。这并不完美，但有效：

function clearOut($what) {
    $buttons.each(function () {
        if ($(this).is($what)) {
            $buttons = $buttons.not($what)
            }
        });
     }

// filter for existing buttons
// TODO: improve
if ($first.find('.midToggle')) {
    clearOut('.midToggle');
    }
if ($first.find('.menuToggle')) {
    clearOut('.menuToggle');
    }
if ($first.find('.ui-crumbs')) {
    clearOut('.ui-crumbs');
    }

Answer 1

我把你的代码尖叫成两半：

$('.dropZone').each(function() {
    var $dropZone = $(this);
    var $buttons = $elements.clone();
    $buttons.each(function() {
        var $button = $(this);

        if ($dropZone.find('.' + $button.attr('class')).length) 
            $button.remove();
    });

    $dropZone.append($buttons);
});

Answer 2

$('.dropZone').each(function() {     
   $buttons = $elements.filter(function() {
       if ($('.'+this.className).length) return this;
   });
   $(this).append( $buttons );
});

如何在附加到另一个元素之前使用Jquery / Javascript从选择中删除元素？

2 个答案: