Question

I have html of basically

<div class="letter">A</div>
<div class="letter">B</div>
<div class="letter"></div>
<div class="letter">D</div>
<div class="letter"></div>

and a jQuery function that is returning the index of the first empty div (with the class “letter”)

var firstEmptyIndex;

var findStart = function(){
    var firstEmptyElement = $('div.letter:empty:eq(0)');
    firstEmptyIndex = firstEmptyElement.index('div.letter');
}

How can I extend this findStart function to pass a variable that will begin searching for an empty element at a given index. For exmaple, I want to run findStart(3), which would return the index of the fifth element in the HTML example (4). Running findStart(0) or findStart(1) would return 2.

Answer 1

You can use a combination of :gt and :first:

var findStart = function(i){
    return $('div.letter:gt(' + i + '):empty:first').index('div.letter');
}