CODEWITHSUNDEEP
jqueryhtml
Gerard Simpson
Gerard Simpson

Reputation: 2126

Adding/Removing 'active' class from corresponding child elements in different parents JQuery

I'm a bit of a beginner at jQuery, and this one really has me stumped. I am working with legacy PHP smarty templates so the html that I use has to follow this format:

<div class="container">
<div class="block">
    <div class="header">
    </div>
    <p class="exampleP p1"></p>
    <p class="exampleP p2"></p>
    <p class="exampleP p3"></p>
    <p class="exampleP p4"></p>
    <p class="exampleP p5"></p>
    <p class="exampleP p6"></p>
    <div class="exampleClass div1">1</div>
    <div class="exampleClass div2">2</div>
</div>
<div class="block">
    <div class="header">
    </div>
    <p class="exampleP p1"></p>
    <p class="exampleP p2"></p>
    <p class="exampleP p3"></p>
    <p class="exampleP p4"></p>
    <p class="exampleP p5"></p>
    <p class="exampleP p6"></p>

    <div class="exampleClass div3">3</div>
</div>
<div class="block">
    <div class="header">
    </div>
    <p class="exampleP p1"></p>
    <p class="exampleP p2"></p>
    <p class="exampleP p3"></p>
    <p class="exampleP p4"></p>
    <p class="exampleP p5"></p>
    <p class="exampleP p6"></p>

    <div class="exampleClass div4">4</div>
</div>
<div class="block">
    <div class="header">
    </div>
    <p class="exampleP p1"></p>
    <p class="exampleP p2"></p>
    <p class="exampleP p3"></p>
    <p class="exampleP p4"></p>
    <p class="exampleP p5"></p>
    <p class="exampleP p6"></p>

    <div class="exampleClass div5">5</div>
    <div class="exampleClass div6">6</div>
</div>

What I would like to happen, is that when I click on one of the divs with the "exampleClass" class, all of the corresponding p elements receive a class of active.

For example, I click the 3rd "exampleClass" div: <div class="exampleClass div3">3</div> . The active class is removed from all p elements, and all of the p elements labeled <p class="exampleP p3"></p> get the 'active' class.

This is the jQuery code I have at the moment:

    jQuery('.exampleClass').click(function(){
    jQuery('p').removeClass("active");
    var indexNumber = jQuery(this).index('.exampleClass');  
    jQuery('p').eq(indexNumber).addClass("active");
});

This works for only the child p elements of the first div with a 'block' class. I need it to work for all child p elements in all of the divs with a "block" class. I think I'm close but I seem to have tried it so many different ways with no luck.

Any help would be greatly appreciated.

Thanks

Upvotes: 1

Views: 125

Answers (5)

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28445

You can do something like following

jQuery('.exampleClass').click(function(){
    jQuery('.exampleP').removeClass("active"); // remove active class
     var elClasses = jQuery(this).attr("class").split(' '); // get the classes of clicked div
     for (var i = 0; i < elClasses.length; i++) { // iterate over classes
         if(elClasses[i].indexOf("div") === 0) { // get the class which starts with div
             jQuery(".p" + elClasses[i].substring(3)).addClass("active"); // add active class to corresponding p elements
             break;
         }
     }
});

For reference - http://plnkr.co/edit/IfbK3dpE38lOQ3XYT90y?p=preview

Upvotes: 0

Leo Javier
Leo Javier

Reputation: 1403

keep it simple... here is a solution:

$(function(){
$('p').click(function(){
    $('p').removeClass('active');
    $(this).addClass('active');
});
});

You can test it here: http://jsfiddle.net/leojavier/wyqrvsje/

Upvotes: -1

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

You need to loop through the block elements

 jQuery('.exampleClass').click(function(){
    jQuery('p').removeClass("active");
    var indexNumber = jQuery(this).index('.exampleClass');  
     jQuery('.block').each(function(){
          jQuery(this).find("p").eq(indexNumber).addClass("active");
            });

});

Fiddle

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

Just replace the following code:

jQuery('p').eq(indexNumber).addClass("active");

With:

var indexNumber = jQuery(this).html();  
jQuery('p.p' + indexNumber).addClass("active");

Snippet

jQuery('.exampleClass').click(function(){
  jQuery('p').removeClass("active");
  var indexNumber = jQuery(this).html();  
  jQuery('p.p' + indexNumber).addClass("active");
});
.active {color: blue; background-color: blue;}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="container">
  <div class="block">
    <div class="header">
    </div>
    <p class="exampleP p1"></p>
    <p class="exampleP p2"></p>
    <p class="exampleP p3"></p>
    <p class="exampleP p4"></p>
    <p class="exampleP p5"></p>
    <p class="exampleP p6"></p>
    <div class="exampleClass div1">1</div>
    <div class="exampleClass div2">2</div>
  </div>
  <div class="block">
    <div class="header">
    </div>
    <p class="exampleP p1"></p>
    <p class="exampleP p2"></p>
    <p class="exampleP p3"></p>
    <p class="exampleP p4"></p>
    <p class="exampleP p5"></p>
    <p class="exampleP p6"></p>

    <div class="exampleClass div3">3</div>
  </div>
  <div class="block">
    <div class="header">
    </div>
    <p class="exampleP p1"></p>
    <p class="exampleP p2"></p>
    <p class="exampleP p3"></p>
    <p class="exampleP p4"></p>
    <p class="exampleP p5"></p>
    <p class="exampleP p6"></p>
    <div class="exampleClass div4">4</div>
  </div>
  <div class="block">
    <div class="header">
    </div>
    <p class="exampleP p1"></p>
    <p class="exampleP p2"></p>
    <p class="exampleP p3"></p>
    <p class="exampleP p4"></p>
    <p class="exampleP p5"></p>
    <p class="exampleP p6"></p>

    <div class="exampleClass div5">5</div>
    <div class="exampleClass div6">6</div>
  </div>
</div>

Upvotes: 1

ggdx
ggdx

Reputation: 3064

  1. Find the parent
  2. Find all children .exampleP of parent
  3. addClass()
$('.exampleClass').click(function(){
  $('p').removeClass('active';)
  $(this).parents('.block').find('.exampleP').each(function(){    
     $(this).addClass('active');
  })
})

Upvotes: 0

Related Questions