How to addClass() at RANDOM to an element in jQuery?


Tags: jquery,html,css

Problem :

The html/css:

<style>
div.myWords p { display: hidden; }
p.show { display: block; }
</style>

<div class="myWords">

<p>Hello</p>
<p>Hola</p>
<p>Bonjour</p>

</div><!-- myWords -->

How can I add the class "show" to a single <p> element at a time at random on document ready?

In other words, every time the page is loaded 1 p tag should be visible and this p tag should be chosen at random.



Solution :

Try this:

$(document).ready(function() {
    var paras = $('div.myWords p');
    var rand = Math.floor(Math.random() * paras.length);
    paras.eq(rand).addClass('show');
});

If you are trying to change display: none to display: block, you can omit the show class from your CSS and show it using only jQuery, like this:

$(document).ready(function() {
    var paras = $('div.myWords p');
    var rand = Math.floor(Math.random() * paras.length);
    paras.eq(rand).show();
});

By the way, you need to change your CSS so that overrides work. Change display: hidden; to display: none;, and add the div.myWords class to your second rule:

div.myWords p { display: none; }
div.myWords p.show { display: block; }

    CSS Howto..

    How can I have a CSS style different for IE6?

    Show HTML text if window width is too small with CSS

    How can I define fieldset border color?

    How to fix text running off screen and breaking layout without using CSS word-break property?

    how to apply css to web app?

    How to remove hover effect for some of the cells in angularjs

    How to add hover effect to using CKEditor?
    Here is a script to highlight columns where there is checkmarks with an orange background-color. var CKE = $( '.editor' ); CKE.ckeditor(); var columnIndex=0; $("#update").click(function(){ // Output CKEditor's result in...
    Read more

    jquery show() not displaying properly for highcharts graph

    Foundation Framework: How can I get multiple links in a mobile drop-down to be horizontally aligned and not stacked?

    How to apply CSS color on parent element using a color picker?

    How to make a image stay at the bottom but not rise up

    css: how to make the third div line up with the first div

    How do I make XAMPP use the paths from my Wordpress themes folder?

    How to put 2 text input fields in one?

    How to change css class for the inputfield and label when validation fails?

    How overlay two pictures to another using HTML-CSS?

    How to fix the alignment of my sub-menu

    How can I adjust this carousel to only pause when user mouses over one of the boxes?

    How do I use PHP to apply css properties? [closed]

    How to do a workaround in css that removes spacing in footer of navigator7 vaadin addon

    How to use Materialize css Tabs in Meteor?

    How to draw child element's border outside its parent in CSS (or simulate this effect)?

    How to make CSS width to fill parent?

    How to style only a sub-class with .css?

    server-side control - how set background with css ? (link & hover)

    How to check if the current page is a plugin admin panel in wordpress

    How to make submenus drop down below parent menu, instead of flying out?

    how to make this slide menu work

    css3 pure: how to hover an element outside?

    How can I float divs so that they expand past their container?