Hiding a div with the same class as another using jQuery?
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 开发者_如何学Pythona 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)?
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:
- Find all
div
s with the class -$()
. - Reduce that set temporarily to the first match -
.first()
show
that one (in case it used to be hidden)- End the temporary reduction of the set -
.end()
- Reduce the set to only the matches that aren't the first -
.not(":first")
hide
them
Its not valid html, the id must be unique within the document
http://www.w3.org/TR/html401/struct/global.html#h-7.5.2
Use rel attributes instead of IDs. Then use selector like:
$('div.voted[rel=110]')
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>
<div class="voted id_110">
<!-- some stuff here -->
</div>
<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>
<div class="voted id_100">
<!-- some stuff here -->
</div>
use this to locate the first on http://api.jquery.com/first-selector/
精彩评论