獲取div中元素的樹視圖

我必須爲div內的元素構建樹狀結構。獲取div中元素的樹視圖

例如我有HTML代碼如下：

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

對於上面的代碼中，我必須得到像如下所示的html元素的

#main1 
    .sub1 
    .sub2 
    #sub_sub 
    .sub3

名稱在樹視圖中可以是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元素我怎麼能做到這一點的完整樹視圖。

來源

2015-07-02 Manohar Gunturu

雅它的瞭解，你想讓它使用JQuery發生，但什麼是基本的規則。我的意思是，在什麼基礎上，就像分別應該有一個主類，三個子菜單，3-2-1 sub_sub菜單一樣。 – divy3993

下面是你可以看看得到一個模糊的想法http://jsfiddle.net/depperm/hzuwnye1/ – depperm

@ divy3993沒有規則。動態地它必須提供子/子子元素。 –

$(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>

來源

2015-07-02 20:01:02 Keerthi

它應該動態執行，意味着它必須通過class/id名稱自動識別哪個是子/子子元素。 –

獲取div中元素的樹視圖

回答

相關問題