jQuery的 - 如何遍歷同一父div的第一個孩子

Question

我想遍歷從給定索引處的元素開始的同一父div的第一個孩子。

我有「字」divs環繞「字母」divs。

HTML：

<div class="row"> 
    <div class="twelve columns"> 
    <div class="word"> 
     <div class="character"> 
     <div class="number"> 
      4 
     </div> 
     <div class="options"> 
      GHI 
     </div> 
     <div class="letter">H</div> 

     </div> 
     <div class="character"> 
     <div class="number"> 
      3 
     </div> 
     <div class="options"> 
      DEF 
     </div> 
     <div class="letter">E</div> 

     </div> 
     <div class="character"> 
     <div class="number"> 
      5 
     </div> 
     <div class="options"> 
      JKL 
     </div> 
     <div class="letter">L</div> 

     </div> 
     <div class="character"> 
     <div class="number"> 
      5 
     </div> 
     <div class="options"> 
      JKL 
     </div> 
     <div class="letter">L</div> 

     </div> 
     <div class="character"> 
     <div class="number"> 
      6 
     </div> 
     <div class="options"> 
      MNO 
     </div> 
     <div class="letter">O</div> 

     </div> 

    </div> 
    <div class="word"> 
     <div class="character"> 
     <div class="number"> 
      4 
     </div> 
     <div class="options"> 
      GHI 
     </div> 
     <div class="letter">I</div> 

     </div> 
     <div class="character"> 
     <div class="number"> 
      7 
     </div> 
     <div class="options"> 
      PQRS 
     </div> 
     <div class="letter">S</div> 

     </div> 

    </div> 
    <div class="character"> 
     <div class="number"> 
     4 
     </div> 
     <div class="options"> 
     GHI 
     </div> 
     <div class="letter"></div> 
     <div class="select"> 
     <select class="word-options"> 
      <option value="">Select a word</option> 
      <option value="IT">IT</option> 
     </select> 

     </div> 

    </div> 
    <div class="character"> 
     <div class="number"> 
     8 
     </div> 
     <div class="options"> 
     TUV 
     </div> 
     <div class="letter"></div> 

    </div> 
    <div class="character"> 
     <div class="number"> 
     7 
     </div> 
     <div class="options"> 
     PQRS 
     </div> 
     <div class="letter"></div> 

    </div> 
    <div class="character"> 
     <div class="number"> 
     3 
     </div> 
     <div class="options"> 
     DEF 
     </div> 
     <div class="letter"></div> 

    </div> 
    <div class="character"> 
     <div class="number"> 
     2 
     </div> 
     <div class="options"> 
     ABC 
     </div> 
     <div class="letter"></div> 

    </div> 

    </div> 
</div> 

的jQuery：

var decoder = {}; 
decoder.firstEmptyIndexPrevious; 

var findPrevStart = function(startIndex){ 

//if startIndex is not defined, set it to index of current cursor position 
if (!startIndex){ 
    startIndex = $('div.select').parents('div.character').first().index('div.character'); 
} 

//index of first letter in word before the position of the start index. should return 5 in this example 
decoder.firstEmptyIndexPrevious = $('div.character:lt(' + startIndex + ')').last().siblings('div.word div.character').first().index(); 

//decoder.firstEmptyIndexPrevious = $('div.character:lt(' + startIndex + ')').last().parent().children().first().index(); 

console.log('startIndex = ' + startIndex); 
console.log('decoder.firstEmptyIndexPrevious = ' + decoder.firstEmptyIndexPrevious); 
} 

$(document).ready(function() { 
    findPrevStart(); 
}); 

基本上，在decoder.firstEmptyIndexPrevious，我想這個詞的第一個字母的指數立即出現該選擇元素，其中前（它將像遊標一樣動態地移動DOM）。 startIndex按預期返回7，但decode.firstEmptyIndexPrevious返回0，無論它從哪裏運行。這種情況發生在活動行和註釋行中，但採用的方法略有不同。在這個例子中它應該返回5。不知道有什麼問題。

的jsfiddle：http://jsfiddle.net/mrengy/h2DZG/1/

Answer 1

的問題是： -

• 您.character元素並不都在同.word容器
• .index()查找元素的索引之中的DOM中的兄弟姐妹，不在jQuery集合中。

而且，你似乎需要機制findPrevStart()有和沒有傳遞給它一個startIndex工作。

下面的代碼：

var findPrevStart = function(startIndex) { 
    var $divChar; 

    if (typeof startIndex !== 'undefined') { 
     $divChar = $('div.select').closest('.columns').find('div.character')[startIndex]; 
    } 
    else { 
     //if startIndex is not defined, set it to index of current cursor position 
     $divChar = $('div.select').parents('div.character').first(); 
     startIndex = $divChar.index('div.character'); 
    } 

    //index of first letter in word before the position of the start index. Should return 5 in this example 
    var char = $divChar.prevAll('.word').eq(0).find('div.character').get(0); 
    var chars = $divChar.closest('.columns').find('div.character').get(); 
    decoder.firstEmptyIndexPrevious = $.inArray(char, chars); 

    console.log('startIndex = ' + startIndex); 
    console.log('decoder.firstEmptyIndexPrevious = ' + decoder.firstEmptyIndexPrevious); 
}; 

Updated fiddle