如何判斷元素是否是javascript/jquery中父元素的最後一個或第一個子元素？

我有以下代碼，模擬左鍵或右鍵按下事件的點擊。這是作爲一個畫廊幻燈片的一部分：如何判斷元素是否是javascript/jquery中父元素的最後一個或第一個子元素？

$(document).keydown(function (e) { 
        if(e.keyCode == 37) { // left 
         $(".thumb-selected").prev().trigger('click'); 
        } 
        else if(e.keyCode == 39) { // right 
         $("thumb-selected").next().trigger('click'); 
        } 
       });

本質上它選擇下一個或前一個兄弟（取決於按下的鍵），並調用點擊事件，將依次在畫廊顯示相應的圖像。這些圖像全部存儲在無序列表中。

我被迷惑的地方在於，當選擇第一張或最後一張圖像並單擊左鍵或右鍵時，我希望它獲得圖像列表另一端的下一張圖像。例如，如果選擇第一個圖像並按下左箭頭，假定沒有以前的圖像（或li元素），它會得到列表中的最後一幅圖像。這樣的關鍵從未失去功能。（）（child count（））（child count（））（）（child count）在jquery中是否有一個函數會檢查當前元素是其父項的第一個還是最後一個子元素，或者返回它的索引相對於它的父元素，）他的父母元素？

來源

2011-09-23 Prusprus

你可以問父對象是什麼第一/最後的孩子們，並與當前的元素進行比較。沒有關於性能的想法。 – 2011-09-23 19:05:51

性能不是問題。從我讀過的內容來看，不可能比較兩個選擇器元素（作爲對象）。我可以嘗試比較這些id，但是沒有id被設置在腳本自動生成的列表項上。我試圖儘可能不修改腳本。 – Prusprus

var length = $('#images_container li').length; 
    if(e.keyCode == 37) { // left 
     if($('.thumb-selected').index() > 0) 
       $(".thumb-selected").prev().trigger('click'); 
     else 
       $('.thumb-container').eq(length-1).trigger('click'); 
    } 

    else if(e.keyCode == 39) { // right 
     if($('.thumb-selected').index() < length-1) 
      $("thumb-selected").next().trigger('click'); 
      else 
       $('.thumb-container').eq(0).trigger('click'); 
    }

.thumb-container是的父元素所有的拇指。至少我從你的代碼中得到了什麼。

HTML

<ul class="thumb-container"> 
     <li>thumb</li> 
     <li>thumb</li> 
      . 
      . 
      . 
    </ul>

來源

2011-09-23 19:12:34 Ehtesham

是的，這是列表的結構。 index（）調用似乎有效。我會試試這個。 – Prusprus

這很好。我的代碼中只有當在列表的另一端調用li元素時（if條件失敗時），我的選擇器是$（「。li .thumb-container li」），它帶有一個簡單的last（）或first （）函數指向正確的元素來觸發。 – Prusprus

您可以使用index()，它返回元素的索引，或者您可以使用prev（）和next（）來檢查是否還有一個元素。

if(e.keyCode == 37) { // left 
    if($(".thumb-selected").prev().length > 0)){ 
     $(".thumb-selected").prev().trigger('click'); 
    }else{ 
     //no more elements      
     } 
} 
else if(e.keyCode == 39) { // right 
    if($(".thumb-selected").next().length > 0)){ 
     $(".thumb-selected").next().trigger('click'); 
    }else{ 
     //no more elements      
     } 
}

編輯 - 我更新的代碼，因爲它使下一個要使用更有意義（）和prev（）而不是nextAll（）和prevAll（）

來源

2011-09-23 19:04:09

prevAll（）看起來像個好主意，我不確定爲什麼prev（）會更好地獲得長度。無論如何，似乎都不起作用（一直返回0）。我將開始閱讀這個函數;會讓你知道我找到了什麼。 – Prusprus

你是什麼意思它重新調整0？看看這裏（http://jsfiddle.net/NkWRK/）或告訴我們你的標記。 prev（）和next（）更好，因爲我只看一個元素，他們更快 –

可以使用is()^[docs]方法來測試：

if($(".thumb-selected").is(':first-child')) { 
    // whatever 
} else if($(".thumb-selected").is(':last-child')) { 
    // whatever 
}

來源

2011-09-23 19:32:16 user113716

如何判斷元素是否是javascript/jquery中父元素的最後一個或第一個子元素？

回答

相關問題