var div;
Is that an HTML div, or a $(“div”)? I have no idea. Unless I use:
var $div;
regularly, in which case I know with certainty without having to scroll back up through my code to find out.
So yeah: this article smells 🙁
]]>Agreed. Personally, I like MooTools better.
]]>Of course 1.4’s ability to do things like
$("#foo td:nth-child(2)").text(function(i, currentText){ return currentText + "bar"; }) |
may be an .each() in disguise but the performance improvements mean I no longer care (despite what I said in the bad old days of 1.3)
]]>$(".seeAllTestimonials").toggle(function(){ if(!isAnimating){ isAnimating = true; isInFullView = true; $(this).html("Back") .siblings("ul") .stop() .css({"top":0,"opacity":1.0}) .fadeOut(500) .focus() .find("li:last") .addClass("lastTestimonial") .parent() .parent() .parent() .addClass("viewAll") .animate({width:697+"px"}, 1000) .find(".testimonialsCntnr") .animate({width:697+"px"}, 1000, function(){ $(".seeAllTestimonials") .siblings("ul") .addClass("isFullyOpen") .fadeIn(500); testimonialsBelt.resetBelt(); isAnimating = false; }); } }, function(){ if(!isAnimating){ isAnimating = true; isInFullView = false; $(this).html("See all testimonials") .siblings("ul") .fadeOut(500) .children() .removeAttr("class") .parent() .parent() .parent() .animate({width:200+"px"}, 1000) .find(".testimonialsCntnr") .animate({width:200+"px"}, 1000, function(){ $(".seeAllTestimonials").siblings("ul") .removeClass("isFullyOpen") .fadeIn(500) .end() .parent() .parent() .removeClass("viewAll"); isAnimating = false; testimonialsBelt.resetBelt(); }); } }); |
When performance is a prime concern, then frankly, I wouldn’t necessarily recommend using jQuery in the first place.
Alternatively, if you’re already using jQuery for other reasons then you should be concerned with gaining the best performance.
It’s not necessarily true that new browsers are universally faster and in any case someone has to pay the price for inefficient code whether it’s time, disk wear or electricity bills.
As Josh Powell said, performance is clearly an issue.
To build off of that, maintainability is much simpler with one append than it is with your solution, The only reason anything should ever become more ‘complex’ (from the readability standpoint) is to improve efficiency or performance. In this case, this simply doesn’t cut it.
]]>$('<a/>').text("Linky").click(function(){ ...)On the whole, I think, I’d probably go for something like this:
var div = $('<a>Linky</a>'); $('a', div).click(function(){ return false; }) // rest as above. |
$. It makes your intentions so much more obvious. Consider this:
function showDiv($div) { // whatever } |
You know immediately just by looking at the method signature what type of object is expected. You never have to search back through your code to see if $div is a jQuery object or just a plain DOM Element.
Regarding .append() being very slow: You’ll get differing results depending on what you’re appending to. If you’re appending to an element which is in the document, then the browser has to recalculate styles which is a relatively expensive operation. If you’re adding to something which isn’t in the DOM yet, then it only needs to do this once at the end and it’s much faster.