Разбор HTML с помощью jQuery

Question

Каков хороший способ разбора HTML с помощью jQuery?

У меня есть html вроде ..

<ul><li>Yadayada</li><li>Yadayada</li><li>Yadayada</li></ul>

.., где я хотел бы проанализировать эти элементы ul и li,Использую ли я метод find, а затем просто .remove ('ul') или что-то в этом роде?

И да, я новичок в jQuery / javascript, так что извините за это:)

РЕДАКТИРОВАТЬ:Я хочу разобрать только элементы ul и li.Я все еще хочу сохранить текст, который является ins of ul (в данном случае Yadayadas).

Answer 1

Лучший способ сделать это - ввести теги id и class, чтобы вы могли манипулировать dom с помощью селекторов jQuery.

<ul id="my_list">

В jQuery вы можете получить список объектов:

$("#my_list")

Затем вы можете перемещаться по списку с помощью любого механизма обхода jQuery или Javascript, который имеет смысл для вашего варианта использования.

Answer 2

Что-то вроде этого, возможно?

$('ul').remove();

... удалит все элементы ul и все внутри них.

http://api.jquery.com/remove/

Answer 3

Хм, а как же

$('li').each(function() {
  var ul = $(this).parent('ul');
  ul.after($(this).text() + '<br />');
});
$('ul').remove();

Answer 4

Используйте replaceWith для замены ul текстом внутри него:

$('ul').replaceWith(function() {
  return $(this).text();
});

Пример для JSBin

Answer 5

В JQuery есть 2 типа селекторов, с помощью которых вы можете выбрать любой HTML-элемент на HTML-странице. Это селектор идентификаторов $ ("# id_of_element"), который более или менее похож на document.getelementbyid в javascript, и есть селекторы классов $ (". Cssclasname"), похожие на document.getelementsbyname ().
Когда вы выбираете элемент с некоторыми из этих селекторов, вы можете вызывать различные методы, которые содержит библиотека JQuery. В вашем случае, если вы хотите удалить элемент <ul>, вы можете добавить к нему класс id или css и использовать его как параметр в селекторе, или вы можете просто набрать $('ul').remove();.
вот пример
<ul id="ul_id" class="ul_class">.....</ul>
now you can use this $('#ul_id').remove() or this $('.ul_class').remove().

Answer 6

Вы можете выбрать элементы с помощью $ ("ul") и $ ("li"). Затем вы можете вызвать функцию remove (), чтобы удалить весь элемент со всем внутри. Если вы хотите извлечь текст и просто избавиться от тегов, вы можете использовать функцию text ():

$("<ul><li>Yadayada</li><li>Yadayada</li><li>Yadayada</li></ul>").text()

возвращает

YadayadaYadayadaYadayada

Answer 7

Вместо того, чтобы "разбирать" html, вы можете работать непосредственно с dom.

Если у вас есть строка html для начала, вы можете создать временный узел dom и назначить htmlна это:

var tmp = document.createElement("DIV"); 
tmp.innerHTML = myHtml;

Затем вы можете перебирать дерево dom и делать с ним что-нибудь:

var result = doStuff(tmp); 

, где "doStuff ()" определен как таковой (обратите внимание на рекурсию):

function doStuff (elem) {
var string = '';

switch (elem.nodeType) {
    case 1: // ELEMENT_NODE
        for (var i=0; i<elem.childNodes.length; i++)
           string += doStuff(elem.childNodes[i]);

        break;
    case 3: //TEXT_NODE
        string += elem.nodeValue;
        break;
    }
return string;
}

Вы можете делать там все, что вам нужно ... возможно, добавляя пробелы и тому подобное между отдельными строками.

Это легко построить и не относится к jquery.... просто чистый javascript Дом-ходячий материал.Может показаться немного многословным для такой простой проблемы, как ваша, но техника мощная и легко увидеть, что происходит.