如何只得到<光>tag's innerhtml从具有html代码的内容

How to get only <li> tag's innnerHTML from the content having html code

本文关键字：innerhtml html 代码 tag      更新时间：2023-09-26

我是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");的东西，但它应该只使用内容变量数据。

谢谢。

尝试使用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>"
]

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

您可以尝试使用JQuery API 

<ul>
<li>foo</li>
<li>bar</li>
</ul>
$( "li" ).each(function( index ) {
console.log( index + ": " + $(this).text() );
});

因此，为列表中的每个项目记录一条消息:

0: foo1: bar

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

   $(document).ready(function() {
     // Handler for .ready() called.
     $( "li" ).each(function( count ) {
    console.log( count + ": " + $(this).text() );
    });

} );

相关文章：