本文介绍了一个使用jQuery库遍历HTML列表项的简单示例。通过点击按钮，可以显示列表中每一项的索引值及文本内容。该示例展示了如何结合HTML、JavaScript和jQuery实现基本的网页交互。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("li").each(function ( index,element){
alert(index);
alert(element);
alert($(this).text())
});
});
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("li").each(function ( index,element){
alert(index);
alert(element);
alert($(this).text())
});
});
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>
弹出结果 ：
0
[object HTMLLIElement]
Coffee
1
[object HTMLLIElement]
Milk
2
[object HTMLLIElement]
Soda
扫一扫
819
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
