Tengo el siguiente código html:
<ul> <li>Parameter1</li> <li>Group1 <ul> <li>Parameter2</li> <li>Parameter3</li> </ul> </li> <li>Parameter4</li> <li>Group2 <ul> <li>Parameter5</li> </ul> </li> </ul>Y cuando activé el método onClick en cualquiera de los elementos LI, necesito obtener el elemento LI anterior más cercano.
Si hago clic en Parameter4 , necesito el elemento Parameter3 . Si hago clic en Parameter5 , necesito el elemento Group2 .
Conozco los conceptos básicos de prev(), close(), find(), pero no puedo hacerlo funcionar.
element.prev('li') ignora los LI anidados en UL
Creo que puedo escribir la lógica en palabras: necesito el elemento LI anterior element.prev('li') y si este elemento tiene UL adentro, quiero el último LI en eso. Si no tiene UL, devuelve el prev('li') con el que comenzamos.
Gracias.
Oye, puedes hacer algo como esto... probé esto localmente y está funcionando...
<ul> <li>Parameter1</li> <li>Group1 <ul> <li>Parameter2</li> <li>Parameter3</li> </ul> </li> <li>Parameter4</li> <li>Group2 <ul> <li>Parameter5</li> </ul> </li> </ul>y jQuery así
<script type="text/javascript"> $('li').on('click',function(event) { event.stopPropagation(); if ($(this).children("ul").length > 0) { if($(this).prev('li').length > 0) { console.log($(this).prev('li').text()); } } else if ($(this).prev('li').length > 0 && $(this).prev('li').children("ul").length > 0 ) { console.log($(this).prev('li').children("ul").find("li:last").text()); } else if($(this).prev('li').length > 0) { console.log($(this).prev('li').clone().children().remove().end().text()); } else if ($(this).is(":first-child")) { console.log($(this).parent('ul').parent('li').clone().children().remove().end().text().trim()); } else { console.log($(this).closest('ul').prev('li').text()); } }); </script>PD : No olvides incluir también jQuery
Prueba esto :
$('ul li').click(function(e) { var element = $(this); if(element.prevAll('li').length > 0) { element.prev('li').text(); } else { element.closest('ul').parent('li').text(); } e.stopImmediatePropagation(); });Puede intentar probar cada elemento para ver si el anterior tiene una lista y tomar el último elemento o si el elemento es parte de una lista principal y tomar el valor de la lista principal:
$('li').click(function(e) { e.stopPropagation() var prev = $(e.target).prev(); var parent = $(e.target).parent().closest('li'); if (prev.find('ul li').length) { console.log(prev.find('ul li:last').text()); } else if (parent.length && !prev.length) { console.log(parent.clone().find('ul').remove().end().text()) } else { console.log(prev.text()); } }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>Parameter1</li> <li>Group1 <ul> <li>Parameter2</li> <li>Parameter3</li> <li>GroupX <ul> <li>ParameterX</li> </ul> </li> </ul> </li> <li>Parameter4</li> <li>Group2 <ul> <li>Parameter5</li> </ul> </li> </ul>