Why do I get a "this.prop is not a function" Uncaught TypeError in my console?

Question

My jQuery code is:

$('#edit').click(function(){
    var data = $("#list :input").serialize();
    $.post($("#list").attr('action'), data, function(json) 
    {
        currentRow = json.rowArr[0];
        $("#id").val(currentRow.id);
        $("#id_disp").val(currentRow.id);
        $("#shop").val(currentRow.shop);
        $("#category").val(currentRow.category);
        $("#item").val(currentRow.item);
        $("#qnty").val(currentRow.qnty);
        $("#unit").val(currentRow.unit);

        $.each($("#price_based_on").children('option'), function(index, val) {
            if(this.value.toUpperCase()==currentRow.price_based_on.toUpperCase())
            {
                console.log("Match");
                this.prop("selected", true);
            }
        });

        $("#mrp").val(currentRow.mrp);
        $("#sellers_price").val(currentRow.sellers_price);
        $("#last_updated_on").val(currentRow.last_updated_on);

    },"json");
});

Among this, the only thing of interest are the lines:

$.each($("#price_based_on").children('option'), function(index, val) {
    if(this.value.toUpperCase()==currentRow.price_based_on.toUpperCase())
    {
        console.log("Match");
        this.prop("selected", true);
    }
});

On using the statement this.prop("selected", true); I get the error:

Uncaught TypeError: this.prop is not a function

Why does this happen when .prop() is clearly a function that exists? How do I fix it?

Answer 1

$.each is used to iterate over an object or array. If you want to iterate over the nodes in a jQuery object, use .each like this:

$("#price_based_on").children('option').each(function() {
     ... code here
});

Inside the call back, this refers to the native DOM element (which doesn't have a prop method, so you probably want to do something like this to get a reference to the jQuery object that holds the DOM node:

$("#price_based_on").children('option').each(function() {
    var $this = $(this);
    $this.prop('selected',true)
});