0

Quiero seleccionar n elementos dentro de clase1, pero que si se acaban estos elementos continue por la clase2.

<div class="listas>
    <ul class="clase1">
      <li>list item 1</li>
      <li>list item 2</li>
      <li class="third-item">list item 3</li>
      <li>list item 4</li>
      <li>list item 5</li>
    </ul>
    <div>test</div>
    <ul class="clase2">
      <li class="esteNo">list item 1</li>
      <li>list item 2</li>
      <li class="third-item">list item 3</li>
      <li>list item 4</li>
      <li>list item 5</li>
    </ul>
</div>

var numElementosSeleccionar = 7;
$(".listas").on("click", ".clase1", function(){
   var elem =$(this);
   for(var i = 1; i< **Me flata este dato!¿numElementosSeleccionar?**; i++){
    elem=elem.next();
    elem.css("background-color", "yellow");
    //me falta que cuando se acaben los elementos de la clase1 pase a los de la clase2 menos los que tengan la clase "esteNo"
   }

});

En este caso si selecciono el primer li me debería poner el bg color en amarillo hasta el tercero li de la clase2

2
  • Bienvenido a Stackoverflow. Tu pregunta no se entiende bien. ¿Quieres que si haces click en un li cualquiera empiece a seleccionar hasta 7 elementos li hacia abajo, sin contar ese sobre el que hiciste click y sin contar los que tengan la clase esteNo? ¿Sólo se deben seleccionar los elementos del tipo li?
    – A. Cedano
    el 26 ene. 2019 a las 14:47
  • @A.Cedano quiero que desde el que hago clic me cuente n elementos, en este caso 7 y si no hay suficientes elementos pase a la siguiente lista la de class2
    – umu
    el 26 ene. 2019 a las 14:52

1 respuesta 1

0

Edito. He hecho algún cambio. La idea es que la lista sea circular. Si pulsamos en un elemento con clase .esteNo no colorea nada. Si pulsamos en uno que no tenga la clase comienza a colorear desde ese elemento hasta el numElementosSeleccionar. Si termina con los elementos de la clase2 empieza por los de la clase1

let numElementosSeleccionar = 7;
$(".listas ul li").on("click", function(){   
  //Obtenemos todos los li que no tengan la clase .esteNo
  let lis = $(".listas ul li:not('.esteNo')");
  //Obtenemos el índice del elemento clicado dentro del array lis
  let idx = $.inArray(this,lis);

  //Sólo colorea si pulsamos en un li con clase distinta de .esteNo.
  if(idx!==-1){
    //Mientras haya elementos li por colorear seguimos
    while(numElementosSeleccionar>0){
      //Si llegamos al final de la lista empezamos en el índice cero.
      if(idx>=lis.length){
        idx=0;
      }    
      $(lis[idx]).css("background-color", "yellow");
      idx++;
      numElementosSeleccionar--;
     }   
 }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="listas">
    <ul class="clase1">
      <li>list item 1</li>
      <li>list item 2</li>
      <li class="third-item">list item 3</li>
      <li>list item 4</li>
      <li>list item 5</li>
    </ul>
    <div>test</div>
    <ul class="clase2">
      <li class="esteNo">list item 1</li>
      <li>list item 2</li>
      <li class="third-item">list item 3</li>
      <li>list item 4</li>
      <li>list item 5</li>
    </ul>
</div>

Por cierto, tienes una errata en el selector del click, te falta el punto en listas ($(".listas"))

1
  • interesante :), pero el problema es que siempre empieza por el elemento 1 de la clase1, si le hago clic al elemento 2 de la "clase1" debería empezar a colorear por este
    – umu
    el 26 ene. 2019 a las 14:55

Tu Respuesta

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

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