I don't have time to rewrite your whole example, but I can offer a few tips
that might help. Selecting by class alone can be pretty slow. Basically
every single tag has to be checked for the class every time you do a
selection by class. It would help to at least give the HTML tag that the
class is being applied to, like $('li.current_page_item').
You do quite a few next/prev/addClass calls on the same elements, but you're
reselecting them every time. I suggest you use the "end" function.
Operations that modify what elements are selected work as a stack, and allow
you to "undo" operations, like so:
$(".current_page_item").next().addClass('after').end().prev().addClass('before');
$(".current_page_ancestor").next().addClass('after').end().prev().addClass('before');
Calls to the $ function are often expensive, so it can help to cache them in
a local variable if you find you're calling $ with the same parameter
multiple times.
For that repetitive stuff you're doing at the end, I suggest you look into
the "each" function.
Hope it helps.
--Erik
On Mon, Oct 20, 2008 at 8:08 PM, Kent Humphrey <[EMAIL PROTECTED]>wrote:
>
>
> I am relatively new to jquery, but have managed to muddle my way through a
> complicated navigation design that has overlapping selected states, eg with
> menu items 1,2,3,4 and 5, when item 2 is selected, the images for items 1
> and 3 also have to change.
>
>
> The code is long and convoluted, and I am sure there is a cleaner way to do
> what I am doing. If anyone has any ideas, that would be great.
>
>
> Here's the code:
>
>
>
> // setup before and after classes
> $(".current_page_item").next().addClass('after');
> $(".current_page_item").prev().addClass('before');
> $(".current_page_ancestor").next().addClass('after');
> $(".current_page_ancestor").prev().addClass('before');
>
> // do overlapping images
> $("#primary_nav a").hover(
> function() {
>
> if ((!$(this).parent().hasClass('current_page_ancestor')) &&
> (!$(this).parent().hasClass('current_page_item'))) {
> $(".current_page_item").next().removeClass('after');
>
> $(".current_page_item").prev().removeClass('before');
>
> $(".current_page_item").addClass("current_disabled");
>
> $(".current_page_ancestor").next().removeClass('after');
>
> $(".current_page_ancestor").prev().removeClass('before');
>
> $(".current_page_ancestor").addClass("current_disabled");
> }
> },
> function() {
> $(".current_disabled").next().addClass('after');
> $(".current_disabled").prev().addClass('before');
> $(".current_disabled").removeClass("current_disabled");
> }
> );
>
> $("#page_item_2 a").hover(
> function() {
> $("#page_item_5").addClass('after');
> },
> function() {
> if (!$(this).parent().hasClass('current_page_item')) {
> $("#page_item_5").removeClass('after');
> }
> }
> );
>
> $("#page_item_5 a").hover(
> function() {
> $("#page_item_2").addClass('before');
> $("#page_item_7").addClass('after');
> },
> function () {
> if ((!$(this).parent().hasClass('current_page_ancestor')) &&
> (!$(this).parent().hasClass('current_page_item'))) {
> $("#page_item_2").removeClass('before');
> $("#page_item_7").removeClass('after');
> }
> }
> );
>
> $("#page_item_7 a").hover(
> function() {
> $("#page_item_5").addClass('before');
> $("#page_item_9").addClass('after');
> },
> function () {
> if (!$(this).parent().hasClass('current_page_item')) {
> $("#page_item_5").removeClass('before');
> $("#page_item_9").removeClass('after');
> }
> }
> );
>
> $("#page_item_9 a").hover(
> function() {
> $("#page_item_7").addClass('before');
> $("#page_item_11").addClass('after');
> },
> function () {
> if (!$(this).parent().hasClass('current_page_item')) {
> $("#page_item_7").removeClass('before');
> $("#page_item_11").removeClass('after');
> }
> }
> );
>
> $("#page_item_11 a").hover(
> function() {
> $("#page_item_9").addClass('before');
> },
> function () {
> if (!$(this).parent().hasClass('current_page_item')) {
> $("#page_item_9").removeClass('before');
> }
> }
> );
>
>
> By way of explanation, this is using the css sprites method where I have a
> single image that is all the different states of the nav. The 'before' and
> 'after' classes are used to indicate the nav items either side of the
> selected item. 'current_page_item' and 'current_page_ancestor' are what
> WordPress uses to indicate the selected item, or the parent of the selected
> item. I am using 'current_disabled' to disable the 'current_page_item'
> style, so when you rollover the other nav items they highlight.
>
> If there were some way to combine those if statements, say into a
> switch/case statement, that'd be cool. Not sure if there's anything else
> that can be done.
>
> --
> View this message in context:
> http://www.nabble.com/Help-optimising-jquery-code---there-must-be-a-better-way-tp20082703s27240p20082703.html
> Sent from the jQuery General Discussion mailing list archive at Nabble.com.
>
>
