开发者

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:

  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


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/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜