1

重複の可能性：
jqueryは重複するliを削除します

次のようなリストがあります：http：//jsfiddle.net/UwPTF/

<ul class="uol">
      <li>beta</li>
      <li>gamma</li>
      <li>alpha</li>
    <li>beta</li>
    <li>zeta</li>
    <li>BETA</li>            
</ul>

2つのボタンがあります。1つは重複するアイテムを強調表示するためのもので、もう1つは重複するアイテムを削除するためのものです。

フィルタ機能を使おうとしています。コードを説明していただければ幸いです。

4

3 に答える 3

1

HTML

<ul id="list" class="uol">
  <li>beta</li>
  <li>gamma</li>
  <li>alpha</li>
  <li>beta</li>
  <li>zeta</li>
  <li>BETA</li>            
</ul>

<input id="find" type="button" value="Find" />
<input id="remove" type="button" value="Remove" />​

JavaScript

$('#find').click(function(){
  $('#list li').filter(function(){
    return $(this).siblings().text().toUpperCase().indexOf($(this).text().toUpperCase()) != -1;
  }).addClass('selecteditems');
});

$('#remove').click(function(){
  var removed = [];
  $('.selecteditems').each(function(i, item){
    if($.inArray($(item).text().toUpperCase(), removed) != -1){
      $(item).remove();
    }
    else{
      removed.push($(item).text().toUpperCase());
      $(item).removeClass('selecteditems');
    }
  });
});​

検索ボタンをクリックする<li>と、IDが付いた順序なしリスト内のすべてのアイテムにフィルターが適用されますlist。次に、他のすべてのアイテムを取得し、<li>それらのテキストを1つの文字列に追加して、大文字にします。<li>次に、大文字になっている現在のアイテムがその文字列に含まれているかどうかを確認します。そこにある場合はtrueを返すため、クラスがselecteditems追加されます。

削除ボタンをクリックする<li>と、クラスの最初のアイテムを除くすべてがselecteditems削除され、最初のアイテムからクラスが削除され<li>ます。

こちらでチェックしてください。

すべてのアイテムの文字列に対してチェックするのではなく、個々のアイテムに対してチェックしていることを絶対に確認したい場合は、次のように検索するためのコードを変更できます。

$('#find').click(function(){
  $('#list li').filter(function(){
    var sibs = [];
    $.map($(this).siblings(), function(sibling){
      sibs.push($(sibling).text().toUpperCase());
    });
    return $.inArray($(this).text().toUpperCase(), sibs) != -1;
  }).addClass('selecteditems');
});
于 2012-11-06T16:03:14.137 に答える
0

さて、あなたは他のすべてと各アイテムを比較する必要があります。これを効率的に行うには、すべてのリストアイテムに対して2つのプレーンループを作成します。最初のループでは、テキストに基づいて各アイテムが表示される回数をカウントし、2番目のループではカウントが1より大きいアイテムのみをフィルタリングします。

コードは次のようになります。

function GetDupeItems() {
    var oList = $(".uol");
    var allItems = oList.find("li");
    var mapping = {};
    allItems.each(function(index) {
        var text = $(this).text().toLowerCase();
        if (!mapping[text])
            mapping[text] = 0;
        mapping[text]++;
    });

    return allItems.filter(function() {
        return (mapping[$(this).text().toLowerCase()] > 1);
    });
}

重複をマークするには、次のようにします。

GetDupeItems().addClass('duplicate');

そしてそれはクラス（例えば赤い色）を追加し、非表示にします:(本質的に表示から削除します）

GetDupeItems().hide();

ライブテストケース。

于 2012-11-06T16:01:53.997 に答える
0

この関数を利用すると、次のようにfilter機能します。

$('#find, #remove').click(function(e) {
  $('.uol > li').each(function() {
    var $this = $(this);
    var thisText = $this.html().toUpperCase();

    var count = $('.uol > li').filter(function() {
      return $(this).html().toUpperCase() == thisText;
    }).length;

    if (count > 1) {
      if (e.target == $('#find')[0]) {
        $this.addClass('duplicate');
      } else {
        $('.uol > li').removeClass('duplicate');
        $this.remove();   
      }     
    }

  });
});

したがって、基本的に、各リスト要素をループし、filter関数を使用して、リスト内の現在と同じテキストを持つ要素の数を取得します。その数が1より大きい場合は、要素にクラスを指定しますduplicate（注：これは最適化されていません）。

これがフィドルです

于 2012-11-06T16:06:07.067 に答える