Question

I finally figure out how to ask the right question, and that is, how to add an :eq filter counter to an empty unordered list?

For example, the code below does not seem to add li data only when the ul/li is empty.

<button id="go">Add</button><br>
<label>Position to Add: <input id="pos" value="2" type="text" maxlength="1"</label>    
<br>
<label>Text to Add: <input id="newText" value="New Item" type="text"></label><br>
<br>
<ul id="list"> </ul>

$("#go").click(function() {
    var item = $("#newText").val();
    var n = parseInt($("#pos").val(), 10);
    $('#list li').eq(n).after('<li>' + item + '</li>')
});

If I manually add an item to the list, then the jquery code below works.

<button id="go">Add</button><br>
<label>Position to Add: <input id="pos" value="2" type="text" maxlength="1"</label>    
<br>
<label>Text to Add: <input id="newText" value="New Item" type="text"></label><br>
<br>
<ul id="list"><li> test </li> </ul>

$("#go").click(function() {
    var item = $("#newText").val();
    var n = parseInt($("#pos").val(), 10);
    $('#list li').eq(n).after('<li>' + item + '</li>')
});

Answer 1

It’s invalid HTML (at least for 4.01) to have an empty UL or OL. Firefox will actually add an empty LI to the DOM on your behalf, which could cause issues in the future. More importantly, though, you are trying to create a jQuery object with $('#list li'), a node which doesn’t exist yet at all (regardless of eq(n)).