单击以使用jquery获取数组元素的索引

Question

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

首先是script.js中的代码(我必须加载AND,我无法修改):

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，因此应该是准确的。

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