Javascript 隐藏重复的列表项/具有相同内容的列表项

我得到了一个选项，您必须选择一些选项卡，然后您可以插入您的姓名并按submit，您的姓名将附加到所选选项卡中。问题是，当您选择多个选项卡（我使用jQuery可选小部件这样做）并将您的名字添加到其中时，您的名字会显示多次。这很明显，因为它被添加到每个选项卡中，应该是这样的。 我的目标是javascript只是隐藏“重复”的列表项。因此，您的名字只出现一次，但仍在您选择的每个选项卡上。 这是我的js：

$(function() {
    $('#plannername').prop('disabled', true);
    $('#plannername').attr("placeholder", "zuerst Tage auswählen");
    $('#plannersubmit').attr("value", " ");
    function selectionChange(event, ui) {
        var items = $('.ui-selected', this).map(function () {
            return $(this).index();
        }).get();
        $("section").each(function () {
            $(this).toggle(items.indexOf($(this).index()) > -1);
        });
        $('#plannername').prop('disabled', false);
        $('#plannername').attr("placeholder", "Name eingeben");
        $('#plannersubmit').attr("value", "eintragen");
    }

    $("#selectable").selectable();
    $("#selectable").selectable({
        selected: selectionChange,
        unselected: selectionChange
    });
});


$(function(){
    $('#plannerform').submit(function(e){
        var val = $(this).find('#plannername').val();
        $('ul.plannerlist:visible').append('<li>' + val + '</li>');
        e.preventDefault();
        $('#plannername').val('');
    });
});

$（函数（）{
$（'#plannername'）.prop（'disabled'，true）；
$（“#plannername”）.attr（“占位符”，“zuerst Tage auswählen”）；
$（'#plannersubmit'）.attr（“value”，”）；
功能选择更改（事件、用户界面）{
var items=$（'.ui selected'，this）.map（函数（）{
返回$（this.index（）；
}).get（）；
$（“节”）。每个（函数（）{
$（this）.toggle（items.indexOf（$（this.index（））>-1）；
});
$（'#plannername'）.prop（'disabled'，false）；
$（'#plannername'）.attr（“占位符”，“名称eingeben”）；
$（'#plannersubmit'）.attr（“value”，“eintragen”）；
}
$（“#可选”）.selective（）；
$（“#可选”）。可选({
已选择：selectionChange，
未选择：选择更改
});
});
$（函数（）{
$（“#计划表”）。提交（功能（e）{
var val=$（this.find（'#plannername'）.val（）；
$（'ul.plannerlist:visible'）。追加（'
'+val+'
'）；
e、 预防默认值（）；
$（'#Planner Name'）.val（''）；
});
});

以下是我的HTML选项卡：

<div id="content">
  <section class="tabcontent">
    <ul class="plannerlist">
    </ul>
  </section>
  <section class="tabcontent">
    <ul class="plannerlist">
    </ul>  
  </section>
  <section class="tabcontent">
    <ul class="plannerlist">
    </ul>
  </section>
  <section class="tabcontent">
    <ul class="plannerlist">
    </ul>
  </section>
  <section class="tabcontent">
    <ul class="plannerlist">
    </ul>  
  </section>
  <section class="tabcontent">
    <ul class="plannerlist">
    </ul> 
  </section>
</div>

---

如果您需要查看我的全部代码，可以查看我上面提到的代码笔。

看起来有两个事件将使选项卡显示内容-选择选项卡，然后选择选项卡并提交表单。在这两个事件中，我都会在可见的选项卡中循环，并隐藏任何重复项

创建了一个名为

clearDupes（）

的函数，该函数将隐藏重复项，并在

selectionChange（）

和

$（“#计划表”）中调用它。submit（）

这是一支钢笔，因为表格不能在这么短的时间内提交

$（函数（）{
函数clearDupes（）{
var-arr=[]；
$（'.plannerlist li'）.removeClass（'hidden'）；
$（'.tabcontent:visible'）。每个（函数（）{
$（this）.find（'.plannerlist li'）.each（function（）{
var nameText=$（this.text（）；
如果（arr.indexOf（nameText）>-1）{
$（this.addClass（'hidden'）；
}否则{
arr.push（nameText）；
}
})
})
}
//定义一个函数，用于选择/取消选择
$（'#plannername'）.prop（'disabled'，true）；
$（“#plannername”）.attr（“占位符”，“zuerst Tage auswählen”）；
$（'#plannersubmit'）.attr（“value”，”）；
功能选择更改（事件、用户界面）{
//获取数组中选定项的索引
var items=$（'.ui selected'，this.map（function（））{
返回$（this.index（）；
}).get（）；
//根据相应选项的选择显示或隐藏节
$（“节”）。每个（函数（）{
$（this）.toggle（items.indexOf（$（this.index（））>-1）；
});
$（'#plannername'）.prop（'disabled'，false）；
$（'#plannername'）.attr（“占位符”，“名称eingeben”）；
$（'#plannersubmit'）.attr（“value”，“eintragen”）；
ClearDups（）；
}
$（“#可选”）.selective（）；
$（“#可选”）。可选({
已选择：selectionChange，
未选择：选择更改
});
$（“#计划表”）。提交（功能（e）{
var val=$（this.find（'#plannername'）.val（）；
$（'ul.plannerlist:visible'）。追加（'
'+val+'
'）；
e、 预防默认值（）；
$（'#Planner Name'）.val（''）；
ClearDups（）；
});
});
*{
字体系列：“Josefin Sans”，无衬线；
保证金：0；
填充：0；
框大小：边框框；
}
#可选。用户界面选择{
背景：#9eefbc；
转换：.8s易入易出；
-webkit转换：-webkit转换0.8s，背景色0.8s；
变换：变换0.8s，背景色0.8s；
-webkit变换：透视（300px）旋转3d（1,0,0，-180度）；
变换：透视（300px）旋转3d（1,0,0，-180度）；
-webkit转换来源：50%100%；
变换原点：50%100%；
-webkit透视图来源：50%100%；
透视来源：50%100%；
}
#可选。用户界面已选定{
背景#6dce91；
过渡：所有0.8秒；
}
#可选{
列表样式类型：无；
位置：绝对位置；
宽度：60%；
左缘：20%；
显示器：flex；
转换：.3s易进易出；
z指数：1；
利润上限：3倍；
}
#可选li{
背景：#ddffea；
填充：0.6em；
字号：1.4em；
柔性生长：1；
转换：.3s易进易出；
边界：无；
文本对齐：居中；
线高：0.8em；
}
#可选择。用户界面已选择：之后，
#可选。用户界面已选定：：之后{
位置：绝对位置；
顶部：44px；
左边距：-50px；
转换：.2s易进易出；
内容：''；
宽度：0；
身高：0；
不透明度：1；
动画：dreieckFade 1s向前；
边框顶部：实心15px#6dce91；
左边框：实心20px透明；
右边框：实心20px透明；
}
@关键帧dreieckFade{
0%{不透明度：0；边框顶部：实心0px#6dce91；}
100%{不透明度：1；边框顶部：实心15px#6dce91；}
}
.ui可选帮助程序{
可见性：隐藏；
}
#内容{
宽度：60%；
背景色：#9eefbc；
左缘：20%；
填充顶部：70px；
利润上限：3倍；
填充底部：30px；
}
.tabcontent{
顶部：44px；
背景色
function isUnique(name) {
    var is_unique = true;

    $('ul li').each(function(item, index) {

        if ($( this ).text() === name) {                  
            is_unique = false;
        }
    });  

    return is_unique;
}

var val = $(this).find('#plannername').val();       

if (isUnique(val)) {
    $('ul.plannerlist:visible').append('<li>' + val + '</li>');
    $('#plannername').val('');            
}

...