Response title
This is preview!
Add/Remove class from siblings
in Using jQuery
•
11 years ago
Hi everyone,
I'm new at learning this, so I'm sure it's a silly question... 
Ok, so I'm looking to add a "red"class to div 2 and 3 via jQuery, which I can do. But when another div is clicked and thus gets the "curCol" class, I want the previous and next divs to get that "red"class... And of course, I want to remove "red" in other divs that are not directly before/after the curCol.
Hopefully I was clear enough, and I have included a sample code... Might not be perfect coz I learn from existing stuff, etc. But I just want to understand the process here.
THANK YOU for your help! 
- <body>
- <div id="page-wrap">
- <div class="info-col">1</div>
- <div class="info-col">2</div>
- <div id="starter" class="info-col">3</div>
- <div class="info-col">4</div>
- <div class="info-col">5</div>
- </div>
- </body>
Basically, here div 2 and div 4 get the "red" class. Say I click div 2 now - I want to add the "red" class to div 1 and div 3, and I also want to remove the red class from div 4 since it's not directly after curCol.
- $(function() {
- $("#page-wrap").delegate("dt", "click", function() {
- $el = $(this);
- if (!$el.hasClass("current")) {
- $parentWrap = $el.parent().parent();
- $otherWraps = $(".info-col").not($parentWrap);
- $parentWrap.addClass("curCol");
- if (!$el.hasClass("red")) {
- $parentWrap.removeClass("red");
- }
- $otherWraps.removeClass("curCol");
- $parentWrap.prev().addClass("red");
- $parentWrap.next().addClass("red");
- }
- });
- $("#starter").trigger("click");
- });
1