2011-08-15 224 views
0

我正在尋找解決方案以刪除使用javascript數組過濾的<li>標籤。jQuery |刪除li標籤

變種mygroups = [ 「1」, 「8」, 「3」, 「4」, 「5」]

實施例(輸入):

<li><div>1 element. Bla bla bla</div></li> 
<li><div>2 element. Bla bla bla. This is my <span>post</span> into new group</div></li> 
<li><div>3 element. Bla bla bla. Another one</li> 
<li><div><a href="/groups/viewgroup/1-first-group">First group</a></div></li> 
<li><div>5 element. Bla bla bla. This is my <span>new post</span></div></li> 
<li><div>6 element. <img alt="groups.wall" class="newsfeed-icon" src="/assets/favicon/default.png"></div></li> 
<li>7 element.</li> 
<li><div><a href="/groups/viewgroup/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="/groups/viewgroup/5-tttt-group">First group</a></div></li> 

如何獲得這個輸出(刪除所有不包含mygroups的實例):

<li><div><a href="/groups/viewgroup/1-first-group">First group</a></div></li> 
<li><div><a href="/groups/viewgroup/8-second-group">First group</a></div></li> 
<li><div><a href="/groups/viewgroup/5-tttt-group">First group</a></div></li> 

謝謝!

+0

可能重複[刪除李標籤2](http://stackoverflow.com/questions/7064012/remove-li-tags-2 ) – NGLN

回答

1

編輯:更新以符合您的新要求。

更新了jsFiddle示例。

我用jQuery的代碼是:

$(function() { 
    var mygroups = ["1", "8", "3", "4", "5"]; 
    $('li').each(function() { 
     var $li = $(this); 
     // if you only want li's with an <a> link to a group page which matches one 
     // in your mygroups list... 
     var $a = $li.find('a[href^="/groups/viewgroup/"]'); 
     // if we find a matching <a> (whose href attribute starts with "/groups/viewgroup/") 
     if ($a.length) { 
      // extract this <a>'s group number using a regular expression 
      var groupNum = $a.attr('href').replace(/^\/groups\/viewgroup\/(\d+)-.+$/gi, '$1'); 
      // remove the <li> if group number is not in our allowed array 
      if ($.inArray(groupNum, mygroups) == -1) $li.remove(); 
     } else { 
      $li.remove(); // no <a> found, so remove this <li> 
     } 
    }); 
}); 

我試圖評論這說明大部分線路,讓我知道如果有什麼是沒有意義的。您可以使用此ChopApp page來點擊行,並且比在StackOverflow中可以更輕鬆地添加註釋/問題。如果你使用這個,請在​​這裏留下評論,我會在那裏回答你的問題。

+0

謝謝!我的任務有小的變化。請檢查。 – user889349

3

真的應引入某種標誌(例如一個類名或部分data-屬性),以確定你沒有顯示<li>節點。這樣一個詳細的檢查需要掃描每個<li>的整個HTML,這不是一個好的做法。但是,它可能看起來像這樣:

$('li').each(function(_, node) { 
    if(!/group|groups/.test(node.innerHTML)) 
     $(node).remove(); 
}); 

演示:http://jsfiddle.net/zkprg/

+0

感謝'功能(_,節點)',我從來沒有看到它 –

+0

謝謝!我的任務有小的變化。請檢查。 – user889349