0

特定のインデックスの要素から始まる同じ親 div の最初の子にトラバースしようとしています。

「文字」の div を囲む「単語」の div があります。

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 で、この select 要素が表示される直前の単語の最初の文字のインデックスを取得したいと考えています (カーソルのように動的に DOM を移動します)。startIndex は期待どおり 7 を返していますが、decoder.firstEmptyIndexPrevious はどこから実行しても 0 を返しています。これは、アクティブな行とコメントアウトされた行の両方で、わずかに異なるアプローチで発生します。この例では、5 が返されます。何が悪いのかわからない。

JSFiddle: http://jsfiddle.net/mrengy/h2DZG/1/

4

1 に答える 1

0

問題はそれです ：-

  • あなたの.character要素はすべて同じ.wordコンテナにありません
  • .index()jQuery コレクション内ではなく、DOM 内の兄弟の中から要素のインデックスを検索します。

また、渡されたものを使用する場合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);
};

更新されたフィドル

于 2013-04-27T00:14:14.017 に答える