JQuery | Удалить теги li - PullRequest
Новая
       18

JQuery | Удалить теги li

0 голосов
/ 15 августа 2011

Я ищу решение для удаления тегов <li>, отфильтрованных с использованием массива javascript.

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>

Как получить этот вывод (Удалить все экземпляры, которые не содержат 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>

Спасибо!

Ответы [ 2 ]

3 голосов
/ 15 августа 2011

Вы на самом деле должны ввести какой-то флаг (например, имя класса или некоторые атрибуты data-), чтобы идентифицировать <li> узлы, которые вам не нужно отображать. Такая подробная проверка должна сканировать весь HTML-код для каждого <li>, что не является хорошей практикой. Однако это может выглядеть так: 

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

Демо: http://jsfiddle.net/zkprg/

1 голос
/ 15 августа 2011

РЕДАКТИРОВАТЬ: Обновлено в соответствии с вашими новыми требованиями.

Также обновлен пример 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 , чтобы щелкать по строкам и добавлять заметки / вопросы проще, чем в StackOverflow.Просто оставьте мне комментарий здесь, если вы используете это, и я отвечу на ваши вопросы там.

...