How does the following jQuery code work?

Question

Came across a code, and was wondering why this works?

$.fn.appendVal = function(txt) { return this.each(function(){ this.value += txt; }); };

As opposed to simple:

 $('#sometextboxaspcontrol').value +=txt;

btw. I know the 'simple' doesn't, but why?

Answer 1

this creates a jquery plugin to essentially do the same thing as your bottom example. you're right, the bottom should be equivalent (aside from the syntax issues mentioned in the other responses), but I'm guessing that the top snippet was created as an example of how to extend jquery, which can end up being quite powerful.

It lets you write:

$('#sometextboxaspcontrol').appendVal(txt);

As you can imagine, the abstraction can be extended while keeping a very simple public API.

Answer 2

jQuery objects don't have a property called value. To get or set the value of a jQuery object you have to use .val().

So $(...).value doesn't get or set anything and hence doesn't work.

Answer 3

The more complex first example also lets you append values to multiple matching elements at once...

Answer 4

The simple version doesn't work because that property doesn't exist on an array of elements.

The jQuery object is essentially just an array. The reason why you can't use:

$('#sometextboxaspcontrol').value +=txt;

Is because 'value' is not a valid option in the context of the jQuery array. You need to use a method because the 'value' property is applied to every element in the jQuery array, even if that array is one element long.

Answer 5

jquery returns a sequence of matching objects. yes, even when you reference a unique element identifier:

$('#foo').value = 'bar'
$('#foo').value != 'bar'

Both jQuery's are actually different objects that contain the same elements. So this is where the jquery extension comes in and applies the operation to each selected element.

Poke around the javascript console with firebug. It will be enlightening. You can actually experiment right here in SO as they use jQuery.

Answer 6

The jQuery function, $(...) doesn't return the element directly. It returns a jQuery object that represents a list of one or more matching elements*.

If the selector expression matches a single element, you can use the get() function to retrieve it and work with it directly:

$('#sometextboxaspcontrol').get(0).value +=txt;

If the selector expression matches multiple elements, and you want to append to each element's value independently, you need to iterate over the elements in some way. Again, you could use get() (without an index) to get an array of raw elements. You can, however, use the each() function to specify a function that will execute in the context of each element in the match list.

If this is something you do a lot, you can choose to add your own function to the jQuery object itself (i.e. create a plug-in). Typically this will result in smaller, simpler, more readable scripts with less repeated code. This is what the example does. The appendVal() function is added to the jQuery object (and it also returns the jQuery object (returned by the each() function) to allow you to call other jQuery functions in a "chain", e.g.

$('#sometextboxaspcontrol').appendVal(txt).addClass('myClass');

Answer 7

$('#sometextboxaspcontrol')[0].value +=txt;

Would work.

Reason is that the selection return an jquery array rather than a dom element.