CODEWITHSUNDEEP
javascriptjquery
Joshua Bambrick
Joshua Bambrick

Reputation: 2699

Can I reduce this jquery script down to one line?

I have written this code

if (forw == true)
    {
    if ($('.tickertape li.active')[0] != $('.tickertape li').last()[0])
        {
        $('.tickertape li.active').removeClass('active').next().addClass('active');
        }
    else
        {
        $('.tickertape li.active').removeClass('active');
        $('.tickertape li').first().addClass('active');
        }
    }
else
    {
    if ($('.tickertape li.active')[0] != $('.tickertape li').first()[0])
        {
        $('.tickertape li.active').removeClass('active').prev().addClass('active');
        }
    else
        {
        $('.tickertape li.active').removeClass('active');
        $('.tickertape li').last().addClass('active');
        }
    }

Which works but really feels like it should only be on one line. This there a way to do this?

Upvotes: 0

Views: 155

Answers (5)

JaredPar
JaredPar

Reputation: 754743

You could do an extremely long single line like so ...

forw ? $('.tickertape li.active').removeClass('active').next().addClass('active') : $('.tickertape li.active').removeClass('active').prev().addClass('active');

But a more tenable solution though would be to add a jQuery extension for this type of method

(function( $ ) {
  $.fn.nextOrPrev = function(useNext) {
    return this.each(function() {
      if (useNext) {
       return $(this).next();
      } else {
       return $(this).prev();
      }
    }
  };
});

Then you could simplify it as so

$('.tickertape li.active').removeClass('active').nextOrPrev(forw).addClass('active');

Upvotes: 0

SoWeLie
SoWeLie

Reputation: 1391

Even if you could, I wouldn't recommend it. As is that is already a bit difficult to read. Just because something can be done in one line doesn't mean it should be. You should also think about code readability.

Upvotes: 0

Bojangles
Bojangles

Reputation: 101483

3 lines (spaces for brevity):

var ticker = $('.tickertape li.active');

ticker.removeClass('active');

(forw == true) ? ticker.next().addClass('active') : ticker.prev().addClass('active');

Although personally I'd say what you have above is fine; it's more readable than the conditional operator used above, and it's not that much longer or noticeably slower.

Upvotes: 0

user1106925
user1106925

Reputation: 

$('.tickertape li.active').removeClass('active')[forw == true ? 'next' : 'prev']().addClass('active');

A combination of square bracket notation and a conditional operator can be used to choose the property next or prev.

May be clearer with line breaks...

$('.tickertape li.active')
    .removeClass('active')
    [forw == true ? 'next' : 'prev']() // select the 'next' or 'prev' property
    .addClass('active');

Upvotes: 4

John
John

Reputation: 6553

You could use a ternary operator, but honestly that is hard enough to read as is.

forw == true ? $('.tickertape li.active').removeClass('active').next().addClass('active') : $('.tickertape li.active').removeClass('active').prev().addClass('active');

Terany Operator

Upvotes: 0

Related Questions