码迷,mamicode.com
首页 > Web开发 > 详细

html + jQuery 遍历主机组下的主机

时间:2016-10-01 06:50:32      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:html + jquery 遍历主机组下的主机




{% block right-content %}
    
     <div class="row">
        <div class="list-group ">
             <h4>主机列表</h4>
             <ul class="list-group " id="groups"  >
                {%  for group in request.user.userprofile.host_groups.select_related %}
                    <li class="list-group-item">
                        {{ group }}
                        <span class="badge">{{ group.host_set.count }}</span>
                    </li>
                    <ul class="list-group hidden">
                        {%  for host in group.host_set.select_related %}
                            <li class="list-group-item">
                                    {{ host }}
                            </li>
                         {% endfor %}
                    </ul>
                    <hr>
                {% endfor %}
             </ul>
        </div>
    </div>


{% endblock %}

{% block js %}

<script>
    $(document).ready(function () {
        $("#groups li").click(function () {
            $(this).addClass("active")
            $(this).siblings().removeClass("active")
            $(this).siblings().children().removeClass("active")
            $(this).parent().siblings().removeClass("active")
            $(this).next().removeClass("hidden")
            $(this).next().siblings(‘ul‘).addClass("hidden")
        })
    })
</script>


技术分享

技术分享

技术分享

技术分享


本文出自 “奋斗吧” 博客,请务必保留此出处http://lvnian.blog.51cto.com/7155281/1858077

html + jQuery 遍历主机组下的主机

标签:html + jquery 遍历主机组下的主机

原文地址:http://lvnian.blog.51cto.com/7155281/1858077

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!