7

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

4

4 回答 4

4

您正在询问单击项目的索引。您的代码正在做它应该做的事情。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/

于 2012-12-21T14:43:52.633 回答
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 对象。<- 我确信这部分可以更有效地完成，我只是想把一些东西放在一起。

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

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

于 2012-12-21T15:18:53.183 回答
-1

你可以试试这个。给所有的 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);
    });
});  ​

身份证里的数字？！？

是的，我知道，在 HTML4id中不允许以数字开头。然而，HTML5 移除了这个限制。
这些 div 将根据w3 验证器进行验证。

于 2012-12-21T14:43:57.843 回答
-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>'
    ];
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/

于 2012-12-21T15:00:14.090 回答