jquery - Trouble using nth-child to select elements added to the DOM

Question

My application allows users to add / remove objects to the DOM. (Click a shape to add one, click the added-shape to remove it.)

This works correctly, however now I would like to be able to access these added shapes and manipulate them.

(Attempt to) Loop through nth-child

for(i=0; i<this.shape.length; i++) {
    $('#selected_shape_table:nth-child('+i+')').html("test"); 
}

HTML

<table id="selected_shape_table">

</table>

(Add shapes to table originally)

$('.shape').click(function() {
    var typeOfShape = $(this).attr('id');
    $('#selected_shape_table').append('<td><div id="' + typeOfShape + '" class=selected_shape"> + typeOfShape + '</div></td>'); 
});

Answer 1

#selected_shape_table:nth-child(2) selects the third #selected_shape_table element, which isn't what you're trying to do.

jQuery has the .eq() method:

$('#selected_shape_table *').eq(i).html('test');

Also, make sure you use event delegation or put the event listener code after the loop.