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

Click to get index of array element with jquery

本文关键字：jquery 索引 数组元素 获取 单击      更新时间：2023-09-26

好吧，我已经尽力搜索了，但是。我有一个任务，我需要使用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。假设它在服务器上，我不能访问它，直到我得到它。但我需要的是原始数组中元素的索引

您正在请求所单击项的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/

试试这样:

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循环的数组中，因此应该是准确的。

所有未定义(已删除)的项将被忽略。

你可以试试这个。给所有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验证器进行验证。

如果您希望它有一点动态，您可以创建一个元素，向其添加一个数据字段，然后访问该元素:

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/

相关文章：