Hintergrund ändern Listenelement auf Klick in dynamischen verschachtelte Liste

Question

Ich habe zeichnen verschachtelte Listen in der Laufzeit dynamisch aus der Datenbank in weg wie folgt aus:

<div class="list"><ul> 
<li> 
    listA 
    <ul> 
     <li>Alist1</li> 
     <li>Alist2</li> 
     <li>Alist3</li> 
    </ul> 
</li> 
<li> 
    listB 
    <ul> 
     <li>BList1</li> 
     <li>BList2</li> 
     <li>BList3</li> 
    </ul> 
</li> 

i der Hintergrund der Liste ändern möchten Artikel, wenn darauf geklickt, aber es Stil der alle verschachtelten Liste ändern, indem sie die folgende Methode:

 var $li = $('#list li').click(function() { 
     $li.removeClass('selected'); 
     $(this).addClass('selected'); 
    }); 

mit diesem Stil:

Ich weiß, dass ich den direkten Nachfolger-Operator (>) verwenden soll, um die Änderung nur in Parent zu erzwingen, aber mein Problem, diese Liste wird dynamisch gezeichnet und ich kann ihre Ebenen und verschachtelte Liste nicht begrenzen.

ist es weg um immer zu zwingen nur angeklickte Artikel nur geändert werden?

Answer 1

1- Sie können nicht #list verwenden, während die Liste eine Klasse list nicht id list mit Klassen, die Sie Punkt nicht #

2- Sie müssen verwenden müssen > verwenden wie $('.list > ul > li')

$(document).ready(function(){ 
 
    $('ul > li').on('click' , function(e){ 
 
    e.stopPropagation(); 
 
    //$('li > ul').hide(); 
 
    $(this).find(' > ul').slideDown(); 
 
    $(this).parent('ul').find('li').removeClass('selected'); 
 
    $(this).addClass('selected'); 
 
    }); 
 
});

ul{ 
 
    background : #fff; 
 
} 
 
li > ul{ 
 
    display : none; 
 
} 
 
li.selected{ 
 
    background : red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="list"> 
 
    <ul> 
 
    <li> 
 
     listA 
 
     <ul> 
 
      <li>Alist1 
 
       <ul> 
 
        <li>Alist1-1</li> 
 
        <li>Alist1-2</li> 
 
        <li>Alist1-3</li> 
 
       </ul> 
 
      </li> 
 
      <li>Alist2</li> 
 
      <li>Alist3</li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     listB 
 
     <ul> 
 
      <li>BList1</li> 
 
      <li>BList2</li> 
 
      <li>BList3</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

- Es wird besser sein, mit <a> finden Sie im nächsten Beispiel

$(document).ready(function(){ 
 
    $('a').on('click' , function(e){ 
 
    e.preventDefault(); 
 
    var GetLi = $(this).closest('li'); 
 
    var GetBigUL = $(this).closest('ul'); 
 
    var GetNextUL = $(this).next('ul'); 
 
    GetBigUL.find('a').next('ul').not(GetNextUL).slideUp(); 
 
    GetNextUL.slideDown(); 
 
    GetBigUL.find('li').removeClass('selected'); 
 
    GetLi.addClass('selected'); 
 
    }); 
 
});

ul{ 
 
    background : #fff; 
 
} 
 
li > ul{ 
 
    display : none; 
 
} 
 
li.selected{ 
 
    background : red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="list"> 
 
    <ul> 
 
    <li> 
 
     <a>listA</a> 
 
     <ul> 
 
      <li> 
 
       <a>Alist1</a> 
 
       <ul> 
 
        <li><a>Alist1-1</a></li> 
 
        <li><a>Alist1-2</a></li> 
 
        <li><a>Alist1-3</a></li> 
 
       </ul> 
 
      </li> 
 
      <li><a>Alist2</a></li> 
 
      <li><a>Alist3</a></li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <a>listB</a> 
 
     <ul> 
 
      <li><a>BList1</a></li> 
 
      <li><a>BList2</a></li> 
 
      <li><a>BList3</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>