爲什麼jquery prev（）工作正常，但next（）失敗？

Question

我有以下的html代碼：

<div class="general_images"> 
    <a href="href_1" data-id="id_1"> 
    <img src="some_source"> 
    </a> 
    <a href="href_2" data-id="id_2"> 
    <img src="some_source"> 
    </a> 
    <a href="href_3" data-id="id_3"> 
    <img src="some_source"> 
    </a> 
    <a href="href_4" data-id="id_4"> 
    <img src="some_source"> 
    </a> 
    <a href="href_5" data-id="id_5"> 
    <img src="some_source"> 
    </a> 
</div> 

&我用下面的js代碼來獲得一個和前一個字段的值：

$(".general_images a").click(function(e){ 
    data_prev = $(this).prev().attr('data-id'); 
    data_next = $(this).next().attr('data-id'); 
}); 

但是出於某種原因.prev().attr('data-id')是retruning正確的值，而.next().attr('data-id')返回未定義。

任何建議？

Answer 1

你的代碼工作得很好。你遇到的問題很簡單：

next（）和prev（）獲取元素樹中相同「級別」內的元素。當你點擊具有data-id="id_1"屬性的第一張圖片時，可以看到在該圖片之前沒有元素，這就是爲什麼它會給你"undefined"。

如果點擊data-id="id_5"屬性中的圖像，next（）會發生同樣的事情，您可以看到在該圖像之後沒有元素。