欢迎来到宝物袋网站,如果你有宝物想分享给大家的话,请联系我们。注册 | 登录

当前位置:首页 » js » 正文内容

js遍历子元素,jquery遍历ul标签下的所有li子节点实例

这里小编用的是非原生态js代码来实现遍历子元素的功能,而是采用jquery框架来实现遍历子元素,因为小编觉得jquery用起来更简单,而且兼容各主流浏览器方面更友好。下面我们就来看看遍历一个ul标签下的所有li标签的内容,代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js遍历子元素,jquery遍历ul标签下的所有li子节点实例</title>
<script type="text/javascript" src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.9.1.min.js"></script>
</head>

<body>
<div id="bwd">
    <ul>
      <li><a href="http://www.baowudai.cn/qq/15.html" target="_blank">QQ群群管机器人哪个好用?</a></li>
      <li><a href="http://www.baowudai.cn/php/14.html" target="_blank">php怎么替换指定字符串?str_replace函数使用实例代码</a></li>
      <li><a href="http://www.baowudai.cn/php/13.html" target="_blank">PHP三种统计字符串出现次数方法实例代码分享</a></li>
      <li><a href="http://www.baowudai.cn/js/12.html" target="_blank">怎么让网页加载完毕后才执行指定的JS脚本代码</a></li>
    </ul>
</div>
<script type="text/javascript">
$(function (){
	//这里填写网页加载完毕后要执行的js脚本代码
	$("#bwd ul li").each(function(index, element) {
        console.log($(this).text());
    });
});
</script>
</body>
</html>

注意:如果复制上面这段源码建立的.html文件,运行后没有达到效果,应该是jquery-1.9.1.min.js文件失效了,请改成你自己的jquery文件存放路径。