Fare clic per ottenere l'indice dell'elemento di matrice con jquery

Question

Ok, ho provato a fare ricerche, ma. Ho un compito, in cui ho bisogno di caricare alcuni js usando l'Ajax e così via. Per farla breve, ho bloccato.

Prima un codice script.js (che devo caricare e che non riesco a modificare):

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]); 

Poi il mio script per caricarlo

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

Il problema è che il fare clic su Ho bisogno di ottenere l'indice dell'elemento nell'array, cioè se clicco su "Lorem ipsum 4" la console dovrebbe stampare "4", non "3" come succede ora (a causa dell'elemento cancellato che non appare in dom). C'è un modo per ottenere il risultato giusto usando jQuery?

Ok, devo dire che è un compito. Ed ecco la cosa: non posso semplicemente modificare script.js. Diciamo che è sul server e non ho accesso ad esso fino a quando non capisco. Ma ho bisogno dell'indice di un elemento che ha nell'array originale.

Answer 1

provare qualcosa di simile:

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

Nota come la matrice originale non viene modificata.

Ogni elemento nell'array viene modificato e crea un oggetto jQuery prima di essere aggiunto. < - Sono sicuro che la parte potrebbe essere eseguita in modo più efficiente, stavo solo cercando di mettere insieme qualcosa.

Memorizza il proprio indice nell'array dal ciclo for, in modo che sia accurato.

Tutte le voci non definite (eliminate) vengono ignorate.

Answer 2

Stai chiedendo l'INDICE dell'elemento selezionato. Il tuo codice sta facendo esattamente quello che dovrebbe fare. jQuery non ha modo di sapere se hai cancellato elementi dalla lista originale, può solo vedere cosa c'è attualmente.

La soluzione migliore consiste nell'aggiungere un attributo HTML agli elementi originali e console.log invece dell'attributo .index. Come questo:

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

È possibile try this. Dare a tutti i div un ID, e ottenere che:

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

I numeri in id?!?

Sì, lo so, in HTML4 id s a partire da numeri non consentiti. HTML5, tuttavia, ha rimosso questa restrizione.
Questi div verranno convalidati in base allo w3 validator.

Answer 4

Se si preferisce avere un po 'dinamica, si potrebbe creare un elemento, aggiungere un campo di dati su di esso, quindi accedere a tale elemento:

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

vedere come funziona qui: http://jsfiddle.net/rZjNd/2/