Question

我试图从给定索引处的元素开始遍历同一父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/

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

jQuery - 如何遍历同一父div的第一个子节点

1 个答案: