JQUERY - take dynamically created element index

Question

JQUERY - take dynamically created element index

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I am trying to take the index of a dynamically created element that I have in a list, here I leave the structure of the 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>

So far I have tried to do the following:

$("a.selected").index($('.events ol li')); result: -1 (in any index this is the element)

$(".events ol li").index('a.selected'); result: always -1 as before

$("a.selected").parent().index(); result: always 0

$("a.selected").closest("li").index() result: always 0

but I did not see any kind of result ..

EDIT

trying to take the index:

$("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();
    }
});

creating the elements:

$.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

jquery

asked by Federico Iannarelli 30.10.2018 в 14:44

source

2 answers

0

The problem is that you are looking for an element among the li but where you have to search is among the children of those 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>

answered by 30.10.2018 в 15:11

Restrictions on an input of type date Obtain project directory from any PC

score 2 · Accepted Answer

Based on what I see of your code, you can try this solution:

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

This selects an element a with class selected , takes the index of the parent element (in this case li dento ol within events ) and returns its position (within ol ).

Now, why is not it working? It may be that at the time of dynamically creating the <li><a><a></li> elements you create some a with class selected , which causes several a.selected , which makes it difficult to decide which parent you want to take the index.

What you can do is, before creating another a.selected element, remove the selected class from the rest of the selected elements, so that there is only one:

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>");
}

I hope it serves you.