javascript - 如何获得只有来自具有 html 代码的内容的标记的 innnerHTML

Question

我是 JavaScript 新手。任何人都可以提供如何在数组中获取 li 标记 innerHTML 的想法。例如：

var content = '<li>Item 1</li>
<li>Item 2
 <ol>
  <li>Item 3</li>
  <li>Item 4</li>
 </ol>
</li>
<li>Item 5</li>'

我想迭代它，以便我可以得到如下输出：

arr[0]='<li>Item 1</li>'
arr[1]='<li>Item 2
 <ol>
  <li>Item 3</li>
  <li>Item 4</li>
 </ol>
</li>'
arr[2]='<li>Item 5</li>'

此外，嵌套的 li 也可以通过在嵌套的 ol 中迭代来类似地使用。

我想使用类似的东西，document.getElementsByTagName("li");但它应该只使用内容变量数据。

谢谢。

Answer 1

尝试使用 jQuery

var el = $('<div />').append( content  ),
    ar  = [];

el.find('>li').each( function(){
    ar.push(
        $(this).clone().wrap('<p>').parent().html()
    )
});

console.log( ar );

并在控制台中打印console.log( ar );

[
 "<li>Item 1</li>" , 
 "<li>Item 2<ol><li>Item ...i>Item 4</li></ol></li>","<li>Item 5</li>" ,
 "<li>Item 5</li>"
]

所以你可以访问它 ar[0] 或 1 .. 2 等等 ...

Answer 2

您可以尝试使用 JQuery API

<ul>
<li>foo</li>
<li>bar</li>
</ul>

$( "li" ).each(function( index ) {
console.log( index + ": " + $(this).text() );
});

因此，列表中的每个项目都会记录一条消息：

0: 富 1: 酒吧

Answer 3

看看这个，让我知道 http://jsfiddle.net/MrTJM/

   $(document).ready(function() {
     // Handler for .ready() called.

     $( "li" ).each(function( count ) {
    console.log( count + ": " + $(this).text() );
    });

});