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

您要求点击项目的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 2

尝试这样的事情：

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对象之前创建它。＆lt; - 我确信这部分可以更有效率地完成，我只是想把东西放在一起。

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

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

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/

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

4 个答案: