获取div中元素的树视图

Question

我必须为div中的元素构建树状结构。

例如，我有以下html代码：

<div id="main1">
   <div class="sub1"></div>
   <div class="sub2">
     <div id="sub_sub"></div>
   </div>
   <div class="sub3"></div>   
</div>

对于上面的代码，我必须获得树视图，如下所示

#main1
  .sub1
  .sub2
     #sub_sub
  .sub3  

树状视图中html元素的名称可以是ID名称或类名。我们如何使用JQuery做到这一点。

我尝试过使用jquery的每个函数，但它没有给出树状结构。示例：

          $('div').each(function(){
              if($(this).attr('id')!=undefined)
                 $('#tree').append($(this).attr('id'));
             else
                 $('#tree').append($(this).attr('class'));
        });

它的给予如下所示

                 main1
                 sub1
                 sub2
                 sub_sub
                 sub3

它应该给出完整的html元素树状视图，我该如何做到这一点。

Answer 1

​

$(document).ready(function(){
    $('[class^="sub"]').css('margin-left','20px');
    $('.sub_sub').css('margin-left','40px');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main1">Main
   <div class="sub1">Sub1</div>
   <div class="sub2">Sub2
     <div class="sub_sub">Sub2.1</div>
   </div>
   <div class="sub3">Sub3
    <div class="sub_sub">Sub3.1</div>
    </div>   
    
</div>

​