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

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

我想使用像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：foo 1：酒吧

Answer 3

检查一下，让我知道 http://jsfiddle.net/MrTJM/

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

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

}）;

如何从具有html代码</li>的内容中仅获取<li>标签的innnerHTML

3 个答案: