Question

Basically, I would like to accomplish the following with jQuery:

    <div class="120 most-voted">
       <!-- DON'T HIDE THIS DIV -->
    </div>


    <div class="110 voted">
       <!-- some stuff here -->
    </div>

    <div class="120 voted">
       <!-- hide this div with class '120' since there's already 
            another div with class '120' at the top -->
    </div>

    <div class="23 voted">
       <!-- some stuff here -->
    </div>

EDIT: The numbers are dynamically generated by a PHP function:

    <?php $postid = get_the_ID(); // capture the id ?>

    <div id="<?php echo $postid; ?>" class="most-voted">

I don’t want to hide the div at the top.

Any suggestions (I don’t mind wrapping another div in the div at the top to accomplish this result)?

Answer 1

This will make the first div with class “v120” visible and all others hidden:

var theClass = "v120";
$("div." + theClass).first().show().end().not(":first").hide();

Live example

(I added the “v” to “120” because I wasn’t sure whether “120” is a valid CSS class.)

How that works:

1. Find all divs with the class – $().
2. Reduce that set temporarily to the first match – .first()
3. show that one (in case it used to be hidden)
4. End the temporary reduction of the set – .end()
5. Reduce the set to only the matches that aren’t the first – .not(":first")
6. hide them