.find not working jQuery

Question

I'm working on a small project here but for some reason I keep getting an error in my console "Error $li.find is not a function". Code below

$orders.delegate('.saveOrder', 'click', function(){
    var $li = (this).closest('li');
    var order = {
        name: $li.find('input.name').val(),
        drink: $li.find('input.drink').val()
    };        
    $.ajax({
        type: 'PUT',
        url: 'http://rest.learncode.academy/api/johnbob/friends' + $li.attr('data-id'),
        data: order,
        success: function (newOrder) {
            $li.find('span.name').html(order.name);
            $li.find('span.drink').html(order.drink);
            $li.removeClass('edit');
        },
        error: function(){
            alert('Error adding order');
        }
    });

The problem occurs when creating the order object. I have been using find all along with no problems but it keeps throwing a type-error saying that find is not a function. Any help would be appreciated.

Answer 1

Don't you mean $(this) not just (this)? Otherwise, it will be another DOMElement, not a jQuery object.