jQuery | li 태그 제거

Question

<li> 태그를 자바 스크립트 배열을 사용하여 필터링하여 제거하는 솔루션을 찾고 있습니다.

VAR의 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> 

(내 그룹을 포함하지 않는 모든 인스턴스 제거 :

<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> 

고마워요!

Answer 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에서 쉽게 추가 할 수 있습니다. 만약 당신이 그것을 사용한다면 여기에 내 의견을 남겨주세요, 그리고 거기에 귀하의 질문에 회신 해 드리겠습니다.

Answer 2

당신은 정말 당신은 표시하지 않아도 <li> 노드를 식별하는 플래그의 어떤 종류 (예를 들어 클래스 명 또는 일부 data- 특성)을 소개한다 . 이러한 상세한 검사는 각각의 <li>에 대해 전체 HTML을 스캔해야하는데, 이는 좋은 습관이 아닙니다. 그러나, 다음과 같이 수 :

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

데모 : http://jsfiddle.net/zkprg/

의