问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

JQUERY如何遍历多个相同CLASS

头像
___Niooo___
    41466996
    <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来实现？先谢谢啦！~

    jquery
    阅读 29.2k
    5 个回答
    得票最新
    头像
    hellnpeter
      1.3k115
      ✓ 已被采纳

      你可以不用遍历，因为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>
      </html>

      试试吧，不知道符合你说的不

      头像
      yisun1900
        3
        新手上路，请多包涵

        $('div ul li:eq[0]').show();
        $('div ul li:eq[1]').hide();

        头像
        blueangel
          50864563

          试用jquery的each（）方法来进行遍历，这个能满足你的要求，至于用法，你可以百度下看看

          头像
          边城
            59.8k157274

            先上 jsfiddle

            https://jsfiddle.net/k6eu74qh/

            再上代码

            $("li").each(function() {
    var li = $(this);

    // 只要不是 ul 的第1个 li，隐藏
    if (li.index() > 0) {
        li.hide();
    }
}).on("click", function() {
    // 点击时显示下一个 li
    $(this).next("li").show();
});
            头像
            zhongming2002
              2
              新手上路，请多包涵

              用jquery 的 each 方法

              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题