Code doesn't work without .show() - jQuery

Question

    this.randomtip = function(){
     var length = $("#showcase ul li").length;
     var ran = Math.floor(Math.random()*length) + 1;
     $("#showcase ul li:nth-child(" + ran + ")").show();
    };
    randomtip();

..the code above works well with .show() in the end, but if I change it to .addClass('show') it won't work.

I'd like to give it a class instead to apply float:left property to all li items instead of the default display:list-item. How do I fix this?

Thanks!

Answer 1

How are you hiding the element in the first place? If you're setting it to display: none, for example, or using jQuery's hide(), which does the same thing, then that will override CSS defined elsewhere and keep your element hidden until you remove it. It ought to work if you use both .show() (to remove display: none) and .addClass('show') (to add your CSS class).

Answer 2

Try replacing

$("#showcase ul li:nth-child(" + ran + ")").show();

with this one

$("#showcase ul li:nth-child(" + ran + ")").addClass('show').show();

Answer 3

After Jordan's answer:

You can replace the display:none from li and then add the class this way:

$("#showcase ul li:nth-child(" + ran + ")").css('display','').addClass('show');

Answer 4

instead of display: none, use .addClass('hidden') / .removeClass('hidden')