JQUERY如何遍历多个相同CLASS
<div class="box">
<div class="item-name">我是名称**1**</div>
<div class="item-list">
<ul>
<li><a href="#">内容1</a></li>
<li><a href="#">内容2</a></li>
</ul>
</div>
<div class="item-name">我是名称**2**</div>
<div class="item-list">
<ul>
<li><a href="#">内容1</a></li>
<li><a href="#">内容2</a></li>
</ul>
</div>
<div class="item-name">我是名称**3**</div>
<div class="item-list">
<ul>
<li><a href="#">内容1</a></li>
<li><a href="#">内容2</a></li>
</ul>
</div>
</div>以上是HTML结构，如何让每个UL里的LI只显示一个呢？内容2变成点击显示？请问如何用JQUERY来实现？先谢谢啦！~
展开
收起
1
条回答
写回答
写回答
-
你可以不用遍历，因为jquery都可以你封装好了啊了，只要是这个class，那么所有找到所有的nodelist。如果需要遍历，给相同的类名的元素不同的dom操作，可以用
$(".item-name").each(function(index,el){})//index代表元素下标，el代表当前元素。当然也可以用一般的循环,for,while,do-while循环去遍历。<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .disp-none { display: none; } </style> <script type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script> </head> <body> <div class="box"> <div class="item-name">我是名称**1**</div> <div class="item-list"> <ul> <li><a href="#">内容1</a></li> <li class="disp-none"><a href="#">内容2</a></li> </ul> </div> <div class="item-name">我是名称**2**</div> <div class="item-list"> <ul> <li><a href="#">内容1</a></li> <li class="disp-none"><a href="#">内容2</a></li> </ul> </div> <div class="item-name">我是名称**3**</div> <div class="item-list"> <ul> <li><a href="#">内容1</a></li> <li class="disp-none"><a href="#">内容2</a></li> </ul> </div> <script type="text/javascript"> (function(){ $(function(){ var str = "<li class='btn'><input type='button' value='显示内容2'/></li>"; $(".item-list ul").append(str); $(".item-list input").click(function(){ var el = $(this); el.parent().prev().removeClass('disp-none'); }) }) })() </script> </body>2019-07-17 19:20:30赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
