检查列表元素中是否有重复的名称

Check for duplicated names in a list element

本文关键字：列表元素 是否 检查      更新时间：2023-09-26

问题：

如何检查列表元素中重复的名称/项目？

我的情况：

我有一个列表中的列表，下面是一个例子：

<ol class="sortable ui-sortable">
<li id="category_1"><div>Car</div>
   <ol>
       <li id="category_2"><div>Color</div>
            <ol>
                <li id="category_3"><div>Red</div></li>
                <li id="category_4"><div>Black</div></li>
            </ol>
       </li>
   </ol>
</li>
<li id="category_5"><div>Motor</div>
   <ol>
       <li id="category_6"><div>Red</div></li>
       <li id="category_7"><div>Black</div></li>
   </ol>
</li>
<li id="category_9"><div>Truck</div></li>
</ol>

正在使用的class="sortable ui-sortable"是 NestedSortable jQuery 插件。因此，列表项是可拖动的。

我想检查这些div 中的名称，当div 被拖到另一个列表中时<ol>.如果此列表包含重复项，它将以红色突出显示。

检查如果我将Red - category_6拖动到Color - category_2内的ol，并且 allready 包含一个红色，则位置(放置点(变为红色。如果用户决定仍将其放在该位置，则列表将返回到其原始位置。 category_6将被移回category_5下面的ol。

因此，列表可能会像这样结束，或者如果您有更好的方法，则可以使用其他方式：

<ol class="sortable ui-sortable">
<li id="category_1"><div>Car</div>
   <ol>
       <li id="category_2"><div>Color</div>
            <ol>
                <li id="category_3"><div>Red</div></li>
                <li id="category_4"><div>Black</div></li>
                <li id="category_6" class="HIGHLIGHTED"><div>Red</div></li>
            </ol>
       </li>
   </ol>
</li>
<li id="category_5"><div>Motor</div>
   <ol>
       <li id="category_7"><div>Black</div></li>
   </ol>
</li>
<li id="category_9"><div>Truck</div></li>
</ol>

考虑到我的列表是 

<ul id="myid">
    <li>apple</li>
    <li>ibm</li>
    <li>apple</li>
    <li>microsoft</li>
    <li>ibm</li>
</ul>

我建议查找重复项的脚本是 

var liText = '',
liList = $('#myid li'),
listOfDuplicate = [];
$(liList).each(function () {
var text = $(this).text();
if (liText.indexOf('|' + text + '|') == -1) liText += '|' + text + '|';
else listOfDuplicate.push($(this));
});
$(listOfDuplicate).each(function () {
     alert("Duplicates :  " + $(this).text());
});

使用fiddle的示例

这是一个开始。接收列表并返回带有重复.text()的第一个li的函数。您将问题标记为jQuery，这使它更容易。

function checkListForDuplicates(ol) {
    var $lis = $(ol).children("li"),
    found = [],
    i;
    for (i = 0; i < $lis.length; i++) {
        text = $($lis[i]).text();
        if ($.inArray(text, found)) {
            return $lis[i];
        } else {
            found.push(text);
        }
    }
}

请参阅下面的编辑

我相信你需要使用 ：contains(( 选择器。

$('div').mouseup(function(){
    var temp = $(this).text();
    var others = $(this).parent().siblings().children('div:contains('+temp+')');
    if(others.size() > 0){
        $(this).addClass('highlighted');
    }else{
        $(this).removeClass();
    }
});

这就是我想出的，但它不起作用:(

也许有人可以在此基础上构建：http://jsfiddle.net/QQ3JD/

编辑：我回到它并让它工作：http://jsfiddle.net/mobabur94/QQ3JD/1/

function checkContents(){
    $("div").each(function(){
        var temp = $(this).text();
        var others = $(this).parent().siblings().children('div:contains('+temp+')');
        if(others.size() > 0){
            $(this).addClass('highlighted');
        }else{
            $(this).removeClass('highlighted');
        }
    });
}
$(document).ready(function(){
    checkContents();
    $('.sortable').mousemove(function(){
        $("div").each(function(){
            var temp = $(this).text();
            var others = $(this).parent().siblings().children('div:contains('+temp+')');
            if(others.size() > 0){
                $(this).addClass('highlighted');
            }else{
                $(this).removeClass('highlighted');
            }
        });
    });
});

这可能很疯狂，但每次鼠标在列表上移动时，它都会执行检查。可能有更好的方法可以做到这一点。

相关文章：