点击获取jquery数组元素的索引

Question

好吧，我已经尽力搜索，但是。 我有一个任务，我需要使用Ajax加载一些js等等。长话短说，我卡住了。

首先在一个的script.js代码（我必须加载和我不能修改）：

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

然后我的脚本加载它

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

的问题是，点击我需要获得数组中的项目的索引，即如果我点击“Lorem ipsum 4”控制台应该打印“4”，而不是“3”，因为它现在发生（因为删除的元素不出现在DOM）。 有没有办法使用jQuery获得正确的结果？

好的，我需要说这是一项任务。这是事情：我简直不能修改script.js。假设它在服务器上，并且在我得到它之前我无法访问它。但我需要它在原始数组中具有的元素的索引。

Answer 1

尝试是这样的：

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

注意原始数组未被修改。

数组中的每一项都被修改，并在追加之前创建一个jQuery对象。我相信这部分可以做得更有效率，我只是想把东西扔在一起。

它将其索引存储在for循环的数组中，因此应该是准确的。

任何未定义（删除）的项目都被忽略。

Answer 2

您正在询问点击项目的INDEX。你的代码正在做它应该做的事情。 jQuery没有办法知道你是否从原始列表中删除了项目，它只能看到当前有什么。

最好的解决方案是将HTML属性添加到原始项目，console.log属性而不是.index。就像这样：

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

你可以try this。给所有的div的ID，并获取：

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

号在ID的？！？

是的，我知道，在HTML4 id以数字开头是不允许的。但是HTML5删除了这个限制。
这些div将根据w3 validator进行验证。

Answer 4

如果你宁愿有它有点活力，你可以创建一个元素，一个数据字段添加到它，然后访问该元素：

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

看看它是如何在这里工作： http://jsfiddle.net/rZjNd/2/