2011-08-15 19 views
9

javascript配列を使用してフィルタリングされた<li>タグを削除するソリューションを探しています。javascript配列を使用してliタグを削除します

アレイ:

var mygroups=["1","8","3","4","5"] 

例(入力):(アンカーで配列内のグループが含まれていないすべてのインスタンスを削除)この出力を取得する方法

<li><div>1 element.</div></li> 
<li><div>2 element. This is my <span>post</span> into new group</div></li> 
<li><div>3 element. Another one</li> 
<li><div> 
     <a href="javascript:void(0);">Actor</a> 
     <a href="/groups/viewgroup/1-first-group">First group</a> 
    </div> 
</li> 
<li><div><a href="javascript:void(0);">Actor</a> 
     <a href="/groups/viewgroup/10-ten-group">Ten group</a>5 element. This is my <span>new post</span></div></li> 
<li> 
    <div>6 element. <a href="/j1.5/index.php/jomsocial/63-zzz/profile">Actor</a></div> 
    <div><a href="/groups/viewgroup/test/5-second-group">Group other</a></div> 
</li> 
<li>7 element.</li> 
<li><div><a href="/groups/viewgroup/test/8-second-group">First group</a></div></li> 
<li><div><a href="/groups/viewgroup/16-other-group">First group</a></div></li> 
<li><div><a href="/j1.5/index.php?option=com_community&view=groups&task=viewgroup&groupid=1&Itemid=4">My other group </a></div></li> 

<li><div> 
     <a href="javascript:void(0);">Actor</a> 
     <a href="/groups/viewgroup/1-first-group">First group</a> 
    </div> 
</li> 
<li> 
    <div>6 element. <a href="/j1.5/index.php/jomsocial/63-zzz/profile">Actor</a></div> 
    <div><a href="/groups/viewgroup/test/5-second-group">Group other</a></div> 
</li> 
<li><div><a href="/groups/viewgroup/test/8-second-group">First group</a></div></li> 
<li><div><a href="/j1.5/index.php?option=com_community&view=groups&task=viewgroup&groupid=4&Itemid=4">My other group </a></div></li> 

このコードは正常に動作しません:

$('li').filter(function() { 
    var a = $(this).find('a'); 
    if (!a.length) 
     return true; 

    var text = a.attr('href').split('/')[3]; 
    text = text.substring(0, text.indexOf('-')); 
    if ($.inArray(text , mygroups) >= 0) 
     return false; 

    return true; 
}).remove(); 

そして、この1はどちらも仕事をしません:フィルタ機能を使用する方法について

$('li').filter(function() { 
    if($(this).is('*:has(a[href|=/group/viewgroup/])') { 
     var href = $(this).find('a').attr('href'), 
      trail = href.split('/')[3], 
      number = + /(\d+)-/.exec(trail)[1]; 
     return $.inArray(myarray, +number) == -1; 
    } 
    return true; 
}).remove(); 

答えて

1

方法。

このシナリオでは、すべてliを選択し、目的のフィルタを除外します。

$('li').filter(function(index){ 
    if(/*condition applied*/){ 
     .... 
    } 
}); 
+1

あなたが実際にフィルタリングしていないとして、あなたは、コードをより理解しやすくするために、ここで 'each'を使用する必要があります。 –

0

これはこれは、あなたがやりたいように思わ

$("li").each(function() { 
      if($(this).find("a").size() == 0) { 
       $(this).remove(); 
      }; 
    }); 
+0

アンカーはhref属性に 'group'を持つ必要があります。 –

+0

これは、テイクを含んでいないすべてのliを削除するだけで、配列を使用してフィルタリングする必要があるとの質問がありました。 –

3

動作します。それはしかし、世界でtidiestコードではありません。

$('li').filter(function() { 
    var a = $(this).find('a'); 
    if (!a.length) 
     return true; 

    var text = /(\d+)-/.exec(a.attr('href'))[1]; 
    if ($.inArray(text , mygroups) >= 0) 
     return false; 

    return true; 
}).remove(); 

その後、配列に一致する値を持っている任意のをフィルタリングし、残っているものを取り除く、すべての李さんを得ています。

http://jsfiddle.net/8AmNR/5/

+0

IMOでは、OPのコードを再検討する必要があります。現在の実装では動作しますが、クラスやその他で 'span'を使うのははるかに簡単です(そして少し速くなります)。 – Bojangles

+0

詳細をもう一度確認してください。 2番目の "A"タグは見つかりません。 – user889349

+0

@ user889349 - この回答と例を更新しました。 –

0
$('li').filter(function() { 
    if($(this).is('*:has(a[href|=/group/viewgroup/])') { 
     var href = $(this).find('a').attr('href'), 
      trail = href.split('/')[3], 
      number = + /(\d+)-/.exec(trail)[1]; 
     return $.inArray(myarray, +number) == -1; 
    } 
    return true; 
}).remove(); 
+0

詳細をもう一度確認してください。 2番目の "A"タグは見つかりません。 – user889349