JQUERY如何遍历多个相同CLASS-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

JQUERY如何遍历多个相同CLASS

小旋风柴进 2016-05-30 14:09:57 2662
<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来实现?先谢谢啦!~

JavaScript
分享到
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:20:30

    你可以不用遍历,因为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>
    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程