獲取使用jquery附加在div中的div的值

Question

我正在研究一個項目並面臨一個jQuery問題。我嘗試過，但無法得到任何想法。 下面是我的代碼，

HTML：

<div class="noti_box1"></div> 

JQuery的：

$(".noti_box1").append("<div class='click'>Test</div>"); 
    $(".noti_box1").append("<div class='click'>Test1</div>"); 
    $(".noti_box1").append("<div class='click'>Test2</div>"); 
    $(".noti_box1").append("<div class='click'>Test3</div>"); 
    $(".noti_box1").append("<div class='click'>Test4</div>"); 

現在，我怎樣才能得到（第三個）使用jQuery '點擊' 類的價值？

輸出將是'Test2'。

謝謝。

Answer 1

您可以使用:eq()選擇器在匹配集內的索引n處選擇元素。

$(".noti_box1").append("<div class='click'>Test1</div>"); 
$(".noti_box1").append("<div class='click'>Test2</div>"); 
$(".noti_box1").append("<div class='click'>Test3</div>"); 
$(".noti_box1").append("<div class='click'>Test4</div>"); 

$(".noti_box1 .click:eq(2)").click(function(e){ 
    alert($(this).text()); //returns "Test3" 
}); 

Answer 2

使用.on點擊功能

試試這個：

$('.click').on('click',function(){ 
    alert($(this).text()); 

}); 

http://jsfiddle.net/tjkueqg7/

Answer 3

如果我正確理解你，你可以使用以下命令：

var value = $('.noti_box1 div .click:nth-child(3)').text(); 

編輯：我查了一下，似乎其他人發佈的eq（）選項更高效。

jQuery difference between :eq() and :nth-child()