jQuery遍歷無序列表/樹視圖

Question

我基本上使用jquery treeview插件http://bassistance.de/jquery-plugins/jquery-plugin-treeview/它沒有搜索功能 - 我解決了 - 但一旦我找到項目我也必須打開整個樹視圖 - 我只能通過遍歷樹來完成。所以下面的問題我有：

可以說我有以下UL

<ul id="mainlist" class="level1"> 
    <li> 
     <div class="hitarea a1"></div> 
     <div class="b1"></div> 
    </li> 
    <li> 
     <div class="hitarea a2"></div> 
     <div class="b1"></div> 
    </li> 
    <li> 
    <div class="hitarea a3"></div> 
    <div class="b1"></div> 
    <ul class="level3"> 
     <li> 
      <div class="hitarea a4"></div> 
      <div class="b1"></div> 
      <ul class="level2"> 
      <li> 
       <div class="hitarea a5"></div> 
       <div class="b1"></div> 
      </li> 
      <li> 
       <div class="hitarea a6"></div> 
       <div class="b1"></div> 
      </li> 
      <li> 
       <div class="hitarea a7"></div> 
       <div class="b1"></div> 
      </li> 
     </ul> 
     </li> 
     <li> 
      <div class="hitarea a8"></div> 
      <div class="b1"></div> 
     </li> 
     <li> 
      <div class="hitarea a9"></div> 
      <div class="b1"></div> 
     </li> 
    </ul> 
    </li> 
</ul> 

什麼，我想是這樣的：

，如果我與類「hitarea A5」的DIV點擊我要獲得所有以前的元素（div）與類「hitarea」 - 以便我可以手動應用.click（）以打開它們。這將是以下幾點：

1. hitarea A4
2. hitarea A3

隨着我得到只有第一個上一個（hitarea A4）以下：

$("#mainlist .a5").parent().prev('.hitarea') 

但我想要所有以前的a4和a3 ....直到達到UL的根。

prevAll也沒有幫助。

========================== 解決方案 ================= =======================

對於任何在jquery treeview插件（http://bassistance.de/jquery-plugins/jquery-plugin-treeview/）中尋找搜索功能的人來說，以下是我對開源社區（@ arun-p-johny）。他們可能希望包括在某種程度上代碼：

<style> 
#search-bottom-div { 
z-index: 999; 
position: absolute; 
background: #FFF; 
padding: 5px; 
width: 220px; 
border: 1px solid #CCC; 
left: 125; 
top: 27; 
min-height: 50px; 
display: none; 
color: #000; 
} 
</style> 

<div style="float:left;"> 
    <input placeholder="Suchen" id="searchtreeitem" name="searchtreeitem"/>  
</div> 
<div id="search-bottom-div"> 
    <div id="search-bottom-div-content"></div> 
    <div id="search-bottom-div-close" style="text-align:right;text-decoration:underline;cursor:pointer;"><br/><br/>Close</div> 
</div> 




$('#searchtreeitem').keyup(function(e) { 
     textval = $(this).val(); 
     $("#search-bottom-div-content").empty(); 
     $("#search-bottom-div").show(); 

     foundItems = $("#mainList").find("span:Contains("+textval+")"); 

     $.each(foundItems, function(index, value) {   
      $("#search-bottom-div-content").append($(value).clone()).append("<br/>"); 
     }); 

    }); 

    $("#search-bottom-div-content span").live("click", function() { 
     foundClass = $(this).attr("class"); 
     $("#mainList ."+foundClass).click(); 

     var $this = $("#mainList ."+foundClass); 
     $lis = $this.parentsUntil('#mainList', 'li'); 
     $hitareas = $lis.children('.hitarea').not(this); 

     $.each($hitareas, function(index, value) { 
      if($(value).next('.orgeinhItem').find('.toporg').length == 0){ 
       $(value).click(); 
      }   
     }); 

     $("#searchtreeitem").val(""); 
     $("#search-bottom-div").hide(); 
    }); 

    $("#search-bottom-div-close").live("click", function() { 
     $("#searchtreeitem").val(""); 
     $("#search-bottom-div").hide(); 
    }); 

    jQuery.expr[':'].Contains = function(a, i, m) { 
      return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
     }; 

Answer 1

嘗試

jQuery(function() { 
    $('.hitarea').click(function() { 
     var $this = $(this), 
      //find all li element between the clicked hitarea and the root ul 
      $lis = $this.parentsUntil('#mainlist', 'li'), 
      //find all hitarea elements in those li elements excludint the clicked hitaread 
      $hitareas = $lis.children('.hitarea').not(this); 

     //create an array which contains the class attribute values of hitareas 
     var classes = $hitareas.map(function() { 
      return this.className 
     }).get(); 
     console.log(classes) 
    }) 
}) 

演示：Fiddle