Question

I have a form something like this:

<form>
    <ul>
        <li>...</li>
        <li><input type="submit" value="go" /></li>
    </ul>
</form>

And then a jquery expression like this:

$(document).ready(function() {
    $('#addField').click(function() {
        var cloned = $('#someid').clone(true);
        $('ul:last-child').before(cloned); // <-- this doesn't work
    });
});

And jquery inserts the cloned object before the UL, not before the last child of the UL, as intended. If I change the jquery expression to “form ul:last-child” then it inserts before the form. What am I doing wrong?

Answer 1

ul:last-child matches a <ul> which is the last child of its parent.

You want ul li:last-child, which matches an <li> which is the last child of its parent and which is in a <ul>.