jQuery - 같은 부모 div의 첫 번째 자식 div로 이동하는 방법

Question

주어진 색인의 요소에서 시작하는 동일한 부모 div의 첫 번째 자식을 탐색하려고합니다.

"word"div가 "letter"div 주위를 둘러 쌉니다.

HTML :

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에, 나는 (즉시 선택 요소가 표시되는 위치를 이전 단어의 첫 번째 문자의 인덱스를 얻으려면 :

<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를 커서와 같이 동적으로 DOM을 통해 이동합니다). startIndex는 예상대로 7을 반환하지만 decoder.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