javascript 单击以使用 jquery 获取数组元素的索引
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13992037/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Click to get index of array element with jquery
提问by kibin
Ok, I've tried my best at searching, but. I've got a task, where I need to load some js using the Ajax and so on. Long story short, I've stuck.
好吧，我已经尽力搜索了，但是。我有一个任务，我需要使用 Ajax 加载一些 js 等等。长话短说，我卡住了。
First a code in script.js (which I must load AND which I can't modify):
首先是 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]);
Then my script to load it
然后我的脚本加载它
$.getScript('script.js', function() {
$('.a').append('<div class="yep">' + divs.join('') + '</div>');
$('.item').each(function() {
$(this).click(function() {
console.log( $('.item').index(this) );
});
});
});
The problem is that on click I need to get index of item in array, i.e. if I click on "Lorem ipsum 4" console should print "4", not "3" as it happens now (because of deleted element which doesn't appear in dom). Is there a way to get the right result using jQuery?
问题是点击时我需要获取数组中项目的索引，即如果我点击“Lorem ipsum 4”控制台应该打印“4”，而不是现在发生的“3”（因为删除的元素没有出现在dom中）。有没有办法使用 jQuery 获得正确的结果？
Ok, I need to say that it's a task. And here is the thing: I simply CAN'T modify script.js. Let's say it's on server and I have no access to it until I get it. But I need index of an element which it has in the original array.
好吧，我需要说这是一项任务。事情就是这样：我根本无法修改 script.js。假设它在服务器上，在我得到它之前我无法访问它。但我需要它在原始数组中的元素的索引。
采纳答案by Ian
Try something like this:
尝试这样的事情：
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") );
});
Notice how the original array isn't modified.
注意原始数组是如何不被修改的。
Each item in the array is modified and creates a jQuery object before it is appended. <- I'm sure that part could be done more efficiently, I was just trying to throw something together.
数组中的每一项都被修改并在追加之前创建一个 jQuery 对象。<- 我确信这部分可以更有效地完成，我只是想把一些东西放在一起。
It stores its index in the array from of the forloop, so that should be accurate.
它将其索引存储在for循环的数组中，因此应该是准确的。
Any undefined (deleted) items are ignored.
任何未定义（已删除）的项目都将被忽略。
回答by Blazemonger
You're asking for the INDEX of the clicked item. Your code is doing exactly what it's supposed to do. jQuery has no way to know if you've deleted items from the original list, it can only see what's currently there.
您要求单击项目的 INDEX。您的代码正在做它应该做的事情。jQuery 无法知道您是否从原始列表中删除了项目，它只能查看当前存在的内容。
The best solution is to add an HTML attribute to the original items, and console.logthat attribute instead of the .index. Like this:
最好的解决方案是向原始项目添加一个 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'));
});
});?
回答by Cerbrus
You can try this. Give all the divs an ID, and get that:
你可以试试这个。给所有的 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);
});
}); ?
Numbers in id's?!?
身号码？！？
Yea, I know, in HTML4 ids starting with numbers weren't allowed. HTML5, however, removed this restriction.
Those divs will validate according to the w3 validator.
是的，我知道，在 HTML4 中id，不允许以数字开头。然而，HTML5 取消了这个限制。
这些 div 将根据w3 验证器进行验证。
回答by Mark Schultheiss
If you would rather have it a bit dynamic, you could create an element, add a data field to it, then access that element:
如果您希望它有点动态，您可以创建一个元素，向其中添加一个数据字段，然后访问该元素：
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"));
});
see how it works here: http://jsfiddle.net/rZjNd/2/
看看它是如何工作的：http: //jsfiddle.net/rZjNd/2/
