点击获取数组元素与jQuery的索引
好的，我尽力搜索，但是。 我有一个任务，我需要使用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。 假设它在服务器上，并且在我得到它之前我无法访问它。 但我需要它在原始数组中具有的元素的索引。
尝试这样的事情：
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循环的数组中，所以这应该是准确的。
任何未定义（删除）的项目都会被忽略。
您要求点击项目的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/
你可以试试这个。 给所有的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验证器进行验证。