jQuery traversing up an unordered list / treeview

Question

Im basically making use of the jquery treeview plugin http://bassistance.de/jquery-plugins/jquery-plugin-treeview/ which does not have a search functionality - i solved that - but once i find the item i also have to open the whole treeview - and that i can only do by traversing up the tree. So following problem i have:

Lets say i have the following 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>

What i want is the following:

if i click on the div with class "hitarea a5" i want to get all the previous elements (divs) with the class "hitarea" - so that i can manually apply a .click() to open them as well. These would be the following:

hitarea a4
hitarea a3

With the following i do get only the first previous one (hitarea a4):

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

But i want all the previous ones a4 and a3 .... until the root of the UL is reached.

prevAll does not help either.

========================== Solution ========================================

For anyone looking for a search functionality in the jquery treeview plugin ( http://bassistance.de/jquery-plugins/jquery-plugin-treeview/ ), here following contribution by me to the open-source community ( @arun-p-johny as well). They might want to include that in the code somehow:

<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; 
        };

Is [this](http://jsfiddle.net/3BGrN/10/) what you mean? – billyonecan Jan 10 '14 at 16:27 — billyonecan, Jan 10 '14 at 16:27

score 2 · Accepted Answer · answered Jan 10 '14 at 16:26

Try

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)
    })
})

Demo: Fiddle

jQuery traversing up an unordered list / treeview

1 Answers1