2

问题：

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

我的情况：

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

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

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

例如，如果我将Red-拖到已经包含红色category_6的ol内部Color- category_2，则该位置（dropspot）变为红色。如果用户决定仍将其放在该位置，则列表将返回其原始位置。category_6将比被移回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>
4

3 回答 3

0

SEE EDIT BELOW

I am sure you will need to use the :contains() selector.

$('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();
    }
});

That is what I came up with, but it doesn't work :(

Maybe someone can build on it: http://jsfiddle.net/QQ3JD/

EDIT : I came back to it and got it working: 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');
            }
        });
    });
});

It's probably crazy but every time the mouse moves over the list, it performs the check.. There may be a better way of doing this.

于 2013-04-18T14:08:32.473 回答
0

考虑到我的清单是

<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

于 2013-04-18T13:35:37.210 回答
0

这是一个开始。一个函数，它接收一个列表并返回第一个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);
        }
    }
}
于 2013-04-18T13:31:18.537 回答