Take the 2-minute tour ×

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

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

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

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

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

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)?

share|improve this question
You shouldn't have any elements with the same ID. That's the point of the id attribute. If you need to do things with a bunch of related elements, try using a class rather than an ID. –  Matt Gibson Mar 27 '11 at 8:18
@Matt Gibson OK I changed it for a class. –  alexchenco Mar 27 '11 at 8:20
What does the ID mean? –  Marcel Mar 27 '11 at 8:23
add comment

4 Answers

up vote 1 down vote accepted

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
share|improve this answer
Thanks! But when you said all other, you mean all other divs with class v120, or all other divs regardless of the class? I just want to hide the second div with class v120. –  alexchenco Mar 27 '11 at 8:33
@alexchenco: All other divs with class "v120". Updated the example to demonstrate that. –  T.J. Crowder Mar 27 '11 at 8:34
Thanks for the example. –  alexchenco Mar 27 '11 at 8:36
@alexchenco: Added an explanation as well. :-) –  T.J. Crowder Mar 27 '11 at 8:38
add comment

Its not valid html, the id must be unique within the document


share|improve this answer
add comment

Use rel attributes instead of IDs. Then use selector like:

share|improve this answer
div doesn't have a rel attribute: w3.org/TR/html5/grouping-content.html#the-div-element For elements that do (a, area, link), it defines the relationship of this document to another document, not this element to another element or an abstract concept like "votes". –  T.J. Crowder Mar 27 '11 at 8:32
add comment

If you want to use same div, you should conceder using a class attribute since double id is not allowed.

 <div class="most-voted id_120">
   <!-- some stuff here -->

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

<div  class="voted id_120">
   <!-- hide this div with id 120 since its already 
        at the top in the div with class most-voted -->

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

use this to locate the first on http://api.jquery.com/first-selector/

share|improve this answer
please see my EDIT, sorry. –  alexchenco Mar 27 '11 at 8:23
@alexchenco I edit my post at the bottom –  fatnjazzy Mar 27 '11 at 8:25
add comment

Your Answer


