Фильтруйте HTML-контент с помощью JQuery, но исключайте определенные элементы

Question

У меня есть список сообщений, и я хотел бы удалить все текстовое / HTML-содержимое, кроме набора "strong".

Оригинал

<li id="post">
    <p>
        <strong>Reality</strong>
    </p>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
</li>
<li id="post">
    <p>
        <strong>Buzz</strong><br>
        <br>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
</li>
<li id="post">
    <p>
        <strong>Innovation</strong><br>
        <br>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
</li> 

Желаемый результат

<li id="post">
        Reality
</li>
<li id="post">
        Buzz
</li>
<li id="post">
        Innovation
</li>

Как я могу сделать это с помощью JQuery?

Answer 1

Код ниже работает как задумано. Заменить id="post" на class="post" !!

Скрипка: http://jsfiddle.net/GfsCB/

$("li.post").each(function(){
    var filtered = $("<li>").append($("strong", this).text())
    $(this).replaceWith(filtered);
});

1. Цикл каждого элемента <li>.
2. Создайте новый элемент <li> и добавьте текстовое содержимое всех элементов <strong>
3. Заменить текущий выбранный элемент <li> только что созданным элементом <li> (filtered).

Answer 2

Мое решение состоит в том, чтобы сделать селектор, который выбирает все сильные $ («сильный»), затем удаляет все li и затем .each элемент в $ («сильный»), добавляя его в новый li.

---

Обновление:

Вы можете попробовать это: http://jsfiddle.net/6awfe/

$("li#post").each( function()
    {
        $(this).html("[strong start tag]" + $("strong", this).html()+"[strong end tag]");
    } )

Answer 3

Если вы собираетесь изменить id='post' на class='post' (id s должен быть уникальным):

$("li.post").each(function() {
   $(this).text($(this).find("strong").text());
});

При этом сохраняются все атрибуты, связанные с элементом списка, и заменяется только содержимое.

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

Answer 4

$('.post').each(function(){
    $(this).html($('strong', this).text());
});

Измените id = "post" на class = "post", как утверждают и другие.

Answer 5

Это должно помочь вам:

var htmlText = "";
$('.post').find('strong').each(function() {
    htmlText += "<li class=\"post\">" + $(this).text() + "</li>";
});

alert(htmlText);

Answer 6

Мое решение состоит в том, чтобы сделать селектор, который выбирает все сильные $ («сильный»), затем удаляет все li и затем .each элемент в $ («сильный»), добавляя его в новый li.