Question

问题：

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

我的情况：

我在列表中有一个列表，这是一个例子：

<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 Plugin的<ol>。所以列表项是可拖动的。

当div被拖入另一个列表Red时，我想检查这些div中的名称。如果此列表包含重复项，则会以红色突出显示。

例如，如果我将category_6 - ol拖至Color - category_2内category_6已全部包含红色的地方（dropspot）变红了。如果用户决定仍将其放在该位置，则列表将返回其原始位置。 ol将被移回category_5下面的<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>。

所以如果你有更好的方法，列表可能会像这样结束，或其他东西：

{{1}}

Answer 1

这是一个开始。接收列表并返回带有重复li的第一个.text()的函数。您将问题标记为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);
        }
    }
}

Answer 2

考虑我的名单

<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

的示例

Answer 3

见以下编辑

我确信你需要使用：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');
            }
        });
    });
});

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

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

问题：

我的情况：

3 个答案: