點擊獲取jquery數組元素的索引

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

嘗試是這樣的：

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循環的數組中，因此應該是準確的。

任何未定義（刪除）的項目都被忽略。

Answer 2

您正在詢問點擊項目的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 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/