Click to get index of array element using jquery

Question

Ok, I tried my best in the search, but. I have a task when I need to load some js using Ajax and so on. In short, I'm stuck.

First enter the code in script.js (which I have to load AND, which I cannot change):

var divs = [ '<div class="item">Lorem ipsum 0</div>', '<div class="item">Lorem ipsum 1</div>', '<div class="item">Lorem ipsum 2</div>', '<div class="item">Lorem ipsum 3</div>', '<div class="item">Lorem ipsum 4</div>', '<div class="item">Lorem ipsum 5</div>', '<div class="item">Lorem ipsum 6</div>', '<div class="item">Lorem ipsum 7</div>' ]; delete(divs[3]); 

Then my script to load it

 $.getScript('script.js', function() { $('.a').append('<div class="yep">' + divs.join('') + '</div>'); $('.item').each(function() { $(this).click(function() { console.log( $('.item').index(this) ); }); }); }); 

The problem is that when I click, I need to get the index of the element in the array, that is, if I click on “Lorem ipsum 4”, the console should print “4” and not “3”, as it is happening now (due to remote element that does not appear in dom). Is there a way to get the correct result using jQuery?

Well, I need to say that this is a task. And here's the thing: I just CANNOT change script.js. Let's say this on the server, and I don't have access to it until I get it. But I need the index of the element that it has in the source array.

Answer 1

Try something like this:

http://jsfiddle.net/YjNAL/1/

 var divs = [ '<div class="item">Lorem ipsum 0</div>', '<div class="item">Lorem ipsum 1</div>', '<div class="item">Lorem ipsum 2</div>', '<div class="item">Lorem ipsum 3</div>', '<div class="item">Lorem ipsum 4</div>', '<div class="item">Lorem ipsum 5</div>', '<div class="item">Lorem ipsum 6</div>', '<div class="item">Lorem ipsum 7</div>' ]; delete(divs[3]); var yep = $('<div class="yep"></div>'); // Changed (from edit) for (var i = 0; i < divs.length; i++) { if (divs[i]) { // Don't operate on undefined items var theDiv = $(divs[i]).data("idx", i); // Changed (from edit) yep.append(theDiv); // Changed (from edit) } } $(".a").append(yep); // Changed (from edit) $('.item').on("click", function() { console.log( $(this).data("idx") ); }); 

Note that the original array does not change.

Each element of the array is modified and creates a jQuery object before adding it. - I am sure that the part can be performed more efficiently, I was just trying to throw something away.

It stores its index in an array from a for loop, so this should be accurate.

Any undefined (deleted) items are ignored.

Answer 2

You are querying for the INDEX of the clicked item. Your code does exactly what it should do. jQuery has no way of knowing if you deleted items from the original list, it can only see what currently exists.

The best solution is to add the HTML attribute to the source elements, and console.log this attribute instead of .index . Like this:

 var divs = [ '<div data-idx="0" class="item">Lorem ipsum 0</div>', '<div data-idx="1" class="item">Lorem ipsum 1</div>', '<div data-idx="2" class="item">Lorem ipsum 2</div>', '<div data-idx="3" class="item">Lorem ipsum 3</div>', '<div data-idx="4" class="item">Lorem ipsum 4</div>', '<div data-idx="5" class="item">Lorem ipsum 5</div>', '<div data-idx="6" class="item">Lorem ipsum 6</div>', '<div data-idx="7" class="item">Lorem ipsum 7</div>' ]; delete(divs[3]); $('.a').append('<div class="yep">' + divs.join('') + '</div>'); $('.item').each(function() { $(this).click(function() { console.log($(this).data('idx')); }); });​ 

http://jsfiddle.net/mblase75/8NLGm/

Answer 3

You can try this . Give all divs an identifier and get this:

 var divs = [ '<div class="item" id="0">Lorem ipsum 0</div>', '<div class="item" id="1">Lorem ipsum 1</div>', '<div class="item" id="2">Lorem ipsum 2</div>', '<div class="item" id="3">Lorem ipsum 3</div>', '<div class="item" id="4">Lorem ipsum 4</div>', '<div class="item" id="5">Lorem ipsum 5</div>', '<div class="item" id="6">Lorem ipsum 6</div>', '<div class="item" id="7">Lorem ipsum 7</div>' ]; delete(divs[3]); $('.a').append('<div class="yep">' + divs.join('') + '</div>'); $('.item').each(function() { $(this).click(function() { console.log(this.id); }); }); ​ 

The numbers in id?!?

Yes, I know, in HTML4 id starting with numbers was not allowed. HTML5, however, removed this restriction.
These divs will be checked according to the w3 validator .

Answer 4

If you prefer a little dynamic, you can create an element, add a data field to it, then access this element:

 var divs = [ '<div class="item">Lorem ipsum 0</div>', '<div class="item">Lorem ipsum 1</div>', '<div class="item">Lorem ipsum 2</div>', '<div class="item">Lorem ipsum 3</div>', '<div class="item">Lorem ipsum 4</div>', '<div class="item">Lorem ipsum 5</div>', '<div class="item">Lorem ipsum 6</div>', '<div class="item">Lorem ipsum 7</div>' ]; var newdivs = $('<div class="yep">').append(divs.join("")); newdivs.find('.item').each(function() { $(this).data("myindex", $(this).index()); }); var elementToDelete = 3 delete(divs[elementToDelete]); newdivs.find('.item').eq(elementToDelete).remove(); $('.a').append(newdivs); $('.a').on('click','.item',function() { $(this).css("background-color","lime"); alert($(this).data("myindex")); }); 

see how it works here: http://jsfiddle.net/rZjNd/2/