What jQuery annoyances should I be aware of as a Prototype user?

Question

We're considering switching our site from Prototype to jQuery. Being all-too-familiar with Prototype, I'm well aware of the things about Prototype that I find limiting or annoying.

My question for jQuery users is: After working with jQuery for a while, what do you find frustrating? Are there things about jQuery that make you think about switching (back) to Prototype?

Answer 1

(The only thing I can think of is that this is the element instead of a jQuery object in $("...").each(function)-calls, as $(element) is more often used then just the element. And that extremly minor thing is just about it.

Example of the above (simplified and I know that there are other much better ways to do this, I just couldn't think of a better example now):

// Make all divs that has foo=bar pink.
$("div").each(function(){
  if($(this).attr("foo") == "bar"){
    $(this).css("background", "pink");
  }
});

each is a function that takes a function as parameter, that function is called once for each matching element. In the function passed, this refers to the actual browser DOM-element, but I find that you often will want to use some jQuery function on each element, thus having to use $(this). If this had been set to what $(this) is, you'd get shorter code, and you could still access the DOM element object using this.get(0). Now I see the reason for things being as they are, namely that writing $(this) instead of this, is hardly that cumbersome, and in case you can do what you want to do with the DOM element the way it is is faster than the way it could have been, and the other way wouldn't be faster in the case you want $(this).)

Answer 2

I think the only that gets me is that when I do a selection query for a single element I have to remember that it returns an array of elements even though I know there is only one. Normally, this doesn't make any difference unless you want to interact with the element directly instead of through jQuery methods.

Answer 3

Nope. Nada. Nyet.

Answer 4

My two pain points have been the bracket hell, can get very confusing

$('.myDiv').append($('<ul />').append($('<li />').text('content')));

My other common issue has to do with the use of JSON in jQuery, I always miss the last comma,

$('.myDiv').tabs({ option1:true, options2:false(, woops)});

Finally, I've been using jQuery for about 6 months now and I don't think I'll ever go back to prototypes. I absolutely love jQuery, and a lot of the tricks they use have helped me learn a lot. one cool trick that I like is using string literals for method calls, I never really did that too much with prototypes.

$('.myDiv')[(add ? 'add' : 'remove') + 'Class']('redText');

Answer 5

Probably the only real issue I've ever ran into is $(this) scope problems. For example, if you're doing a nested for loop over elements and sub elements using the built in JQuery .each() function, what does $(this) refer to? In that case it refers to the inner-most scope, as it should be, but its not always expected.

The simple solution is to just cache $(this) to a variable before drilling further into a chain:

$("li").each(function() {
    // cache this
    var list_item = $(this);
    // get all child a tags
    list_item.find("a").each(function() {
        // scope of this now relates to a tags
        $(this).hide("slow");
    });
});

Answer 6

.each:

jQuery (you need Index, even if you're not using it):

$.each(collection, function(index, item) {
  item.hide();
});

Prototype (you're usually using the item, so you can omit the index):

collection.each(function(item) {
  item.hide();
});

Answer 7

This is really only an annoyance if you're doing a lot of DOM manipulation. PrototypeJs automatically adds its API to DOM Elements, so this works in prototypejs (jQuery of course doesn't do this):

var el = document.createElement("div");
el.addClassName("hello"); // addClassName is a prototypejs method implemented on the native HTMLElement

Even without running the native element through the $() function.

PS: Should note that this doesn't work in IE.

Answer 8

I don't think there are any real gotchas, or even any lingering annoyances. The other answers here seem to confirm this - issues are caused simply by the slightly different API and different JavaScript coding style that jQuery encourages.

I started using Prototype a couple of years ago and found it a revelation. So powerful, so elegant. After a few months I tried out jQuery and discovered what power and elegance really are. I don't remember any annoyances. Now I am back working on a project using Prototype and it feels like a step back (to be fair, we're using Prototype 1.5.1).

If you reversed the question - "What Prototype annoyances should I be aware of as a jQuery user?" - you would get a lot more answers.