0

Soy novato con jQuery.

Tengo una lista ordenada <ol> y al principio del código establezco que elementos <li> estarán visibles dependiendo de una opción elegida.

<li></li> 
<li style = "display: none"></li> 
<li style = "display: none"></li> 
<li></li> 

Cree un button con la función .next() para navegar entre elementos <li> pero me lleva a una que esta oculto. ¿Como hago que el button me lleve al siguiente elemento visible?.

intente con:

$(this).nextAll('li:visible')

Pero no me funciono, gracias de antemano.

1 respuesta 1

1

Añade una clase visible a los elementos visibles, y haces un .find('.visible')

<ol>
  <li class="visible">Item 1</li>
  <li style="display: none">Item 2</li>
  <li style="display: none">Item 3</li>
  <li class="visible">Item 4</li>
<ol>

$('ol').find('.visible')

// o tambien

$('ol>li.visible')

Otra alternativa, es añadirle una clase a los elementos invisibles que puede ser hide y con .find(':not(.hide)'), también te trae los elementos visibles.

<ol>
  <li>Item 1</li>
  <li class="hide" style="display: none">Item 2</li>
  <li class="hide" style="display: none">Item 3</li>
  <li>Item 4</li>
<ol>

$('ol').find('li:not(.hide)')

// o tambien

$('ol>li:not(.hide)')

Otra alternativa es accediendo a la propiedad style del elemento, pero lleva mas de trabajo porque tienes que iterar cada li.

Puedes hacer una funcion donde le pasas el li y que retorne true o false si es visible

function isVisible(liElement){
  return liElement.style.display === 'block';
}

// si quieres buscar el oculto usas el operador !
!isVisible( li )
1
  • Seria mejor agregar un ejemplo ya que el OP quiere "navegar entre elementos visibles", no solamente encontrar cuales son visibles y cuales no el 19 ene. 2021 a las 21:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.