Jquery和JS获取ul中li标签的实现方法

获取ul中li标签有多种实现方法，其中jquery和JS是比较常用的方式。以下是详细讲解“Jquery和JS获取ul中li标签的实现方法”的完整攻略。

使用Jquery获取ul中li标签的实现方法

使用Jquery获取ul中li标签，可以使用$('ul li')或者$('ul').children('li')两种方式，它们的使用方法如下：

使用 $('ul li') 方式

该方式表示选取ul下的所有li标签，代码如下：

$('ul li').each(function() {
  console.log($(this).text());
});

上述代码将遍历所有ul下的li标签，并输出它们的文本。

使用 $('ul').children('li') 方式

该方式表示选取ul的所有子元素中的li标签，代码如下：

$('ul').children('li').each(function() {
  console.log($(this).text());
});

上述代码将遍历ul的所有子元素中的li标签，并输出它们的文本。

使用JS获取ul中li标签的实现方法

使用JS获取ul中li标签，可以通过getElementById和getElementsByTagName两个API来实现，具体方法如下：

使用 getElementById 和 getElementsByTagName 两个API的方式

该方式需要在html代码中为ul标签设置一个唯一的id值，然后利用getElementById获取到该ul标签，再利用getElementsByTagName获取该ul下所有的li标签，代码如下：

var ul = document.getElementById('myul');
var lis = ul.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
  console.log(lis[i].innerHTML);
}

上述代码将遍历所有ul下的li标签，并输出它们的文本。

示例说明

下面给出两个示例，分别演示了Jquery和JS获取ul中li标签的实现方法。

示例1：使用Jquery获取ul中li标签

假设html代码如下：

<ul>
  <li>list1</li>
  <li>list2</li>
  <li>list3</li>
</ul>

那么可以使用以下Jquery代码来获取这个ul标签下的所有li标签：

$('ul li').each(function() {
  console.log($(this).text());
});

上述代码将输出如下：

list1
list2
list3

示例2：使用JS获取ul中li标签

假设html代码如下：

<ul id="myul">
  <li>list1</li>
  <li>list2</li>
  <li>list3</li>
</ul>

那么可以使用以下JS代码来获取这个ul标签下的所有li标签：

var ul = document.getElementById('myul');
var lis = ul.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
  console.log(lis[i].innerHTML);
}

上述代码将输出如下：

list1
list2
list3

以上是Jquery和JS获取ul中li标签的实现方法的详细讲解。