1

estoy tratando de tomar el indice de un elemento creado dinamicamente que tengo en una lista, aca les dejo las estructura del DOM

<section class="cd-horizontal-timeline loaded" id="timelineSection">
   <div class="timeline">
      <div class="events-wrapper">
         <div class="events" style="width: 300px; transform: translatex(-120px);">
            <ol>
               <li><a href="url" ></a> </li>
               <li><a href="url" ></a> </li>
               <li><a class="selected" href="url" ></a> </li>
            </ol>
            <span class="filling-line" aria-hidden="true"></span> </div>
        </div>
        <ul class="cd-timeline-navigation">
          <li> 
             <a class="prev" href="#0">Prev</a>
          </li>
          <li> 
             <a class="next" href="#0">Next</a>
          </li>
          <button id="closeTimeline" type="button">Chiudi</button>
       </ul>
   </div>
</section>

hasta el momento he probado a hacer lo siguiente:

$("a.selected").index($('.events ol li')); resultado : -1 (en cualquier indice este el elemento)

$(".events ol li").index('a.selected'); resultado : siempre -1 como antes

$("a.selected").parent().index(); resultado : siempre 0

$("a.selected").closest("li").index() resultado : siempre 0

pero no tube ningun tipo de resultado ..

EDIT

tratando de tomar el indice :

$("button#linetime").on("click", function(){
    var eventsLength = $(".events ol li").length;
    var selectedIndex = $("a.selected").index($('.events ol li'));
    alert(selectedIndex);
    $("section#timelineSection").toggle();
    if ($("a.selected").parent().is(":last-child") ){
        $("a.next").click();
    }
});

creando los elementos :

$.ajax({
    url: url ,
    type: "GET",
    headers: {
        "ACCEPT": "application/json;odata=verbose"
    },
    success: function(data){
        var dataAtt;
        var date;

        for(var i = 0 ; i < $(data.d.results).length; i++){
            var dataCreaz = new Date(data.d.results[i].Modified);
            var mese = dataCreaz.getMonth()+1
            if(mese <10)
                mese = "0"+mese;
                date = dataCreaz.getDay() + "/" + mese + "/" + dataCreaz.getFullYear();
            if (data.d.results[i].Id === itemId){
                $("div.events ol").append("<li><a class='selected' href='#0' data-date='"+dataCreaz+"'>"+date+"</a></li>");
            }else{
                $("div.events ol").append("<li><a target='_blank' href='#0' data-date='"+date+"'>"+date+"</a></li>");
            }
        };
    },
    error: function(error){
    console.log(JSON.stringify(error));
    } 
});

EDIT 2 DOM CREADO DINAMICAMENTE

4
  • Buenas, puedes poner el código donde tratas de tomar el índice? También serviría el código donde creas estos elementos dinámicamente.
    – JCAguilera
    Commented el 30 oct. 2018 a las 13:55
  • @JCAguilera ahi he agregado el codigo que me faltaba
    – Federico
    Commented el 30 oct. 2018 a las 14:00
  • Donde está button#linetime?
    – JCAguilera
    Commented el 30 oct. 2018 a las 14:07
  • @JCAguilera es el boton que sirve para visualizar la section de la Linetime, que la tengo escondida, lo unico que hace es el toggle() digamos, el indice me sirve para poder alinear la linea del tiempo, ya que por default si el evento seleccionado esta en el fondo me lo alinea a la izquierda, y esto me sirve para poder alinearla a la derecha, para que no quede mal la parte grafica
    – Federico
    Commented el 30 oct. 2018 a las 14:12

2 respuestas 2

2

Según lo que veo de tu código, puedes intentar con esta solución:

$(".events ol li a.selected").parent().index();

Esto selecciona un elemento a con clase selected, toma el índice del elemento padre (en este caso li dento de ol dentro de events) y devuelve su posición (dentro de ol).

Ahora, ¿por qué no está funcionando? Puede ser por que al momento de crear dinámicamente los elementos <li><a><a></li> creas algunos a con clase selected, lo que hace que hayan varios a.selected, lo que dificulta decidir de cual padre quieres tomar el índice.

Lo que puedes hacer es, antes de crear otro elemento a.selected, quites la clase selected del resto de los elementos selected, para que haya solo uno:

if (data.d.results[i].Id === itemId){
    $('a.selected').removeClass('selected');
    $("div.events ol").append("<li><a class='selected' href='#0' data-date='"+dataCreaz+"'>"+date+"</a></li>");
}

Espero te sirva.

4
  • no, yo tambien lo pensaba, pero la creacion funciona bien, tengo un solo elemento con clase selected, pondrè la imagen en la pregunta
    – Federico
    Commented el 30 oct. 2018 a las 14:22
  • Ok, entonces puedes intentar haciendo esto: $(".events ol li a.selected").parent().index()
    – JCAguilera
    Commented el 30 oct. 2018 a las 14:23
  • perfecto funciona ! muchisimas gracias ! edita la respuesta asi te la puedo votar como correcta !
    – Federico
    Commented el 30 oct. 2018 a las 14:28
  • Listo, muchas gracias!
    – JCAguilera
    Commented el 30 oct. 2018 a las 14:28
0

El problema es que estás buscando un elemento entre los li pero donde tienes que buscar es entre los hijos de esos li:

console.log($(".events ol li").children().index($("a.selected")));
console.log($(".events ol li").children().index($("a.notSelected")));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="cd-horizontal-timeline loaded" id="timelineSection">
   <div class="timeline">
      <div class="events-wrapper">
         <div class="events" style="width: 300px; transform: translatex(-120px);">
            <ol>
               <li><a href="url" ></a></li>
               <li><a class="notSelected" href="url" ></a></li>
               <li><a class="selected" href="url" ></a></li>
            </ol>
            <span class="filling-line" aria-hidden="true"></span> </div>
        </div>
        <ul class="cd-timeline-navigation">
          <li> 
             <a class="prev" href="#0">Prev</a>
          </li>
          <li> 
             <a class="next" href="#0">Next</a>
          </li>
          <button id="closeTimeline" type="button">Chiudi</button>
       </ul>
   </div>
</section>

1
  • me da siempre -1 como resultado, siendo el ultimo elemento entre 14 :/
    – Federico
    Commented el 30 oct. 2018 a las 14:17

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.