CODEWITHSUNDEEP
jquery
Chris Johnson
Chris Johnson

Reputation: 119

Efficient way to check two different elements for different classes

My project has generated sets of HTML elements to which classes later get added. I'd like to search in the sets to see if any element has the class span1hr followed immediately by an element that has the class span0hr, and if so, change both of those classes to span1hrfor30mins.

Here's a sample of what the HTML elements could look like:

<div id="programe1" class="pgmFirstRow div_1_2 row2"></div>
<div id="programe2" class="pgmFirstRow div_1_3 row3 span1hr">NCIS</div>
<div id="programe3" class="pgmFirstRow div_1_4 row4 span0hr">CBS Evening News With Scott Pelley</div>
<div id="programe4" class="pgmFirstRow div_1_5 row5 span1hr">NCIS: Los Angeles</div>
<div id="programe5" class="pgmFirstRow div_1_6 row6">Person of Interest</div>

<div id="programe6" class="pgmFirstRow div_2_2 row2 span1hr">Twisted</div>
<div id="programe7" class="pgmFirstRow div_2_3 row3 span1hr">Pretty Little Liars</div>
<div id="programe8" class="pgmFirstRow div_2_4 row4 span1hr">Pretty Little Liars</div>
<div id="programe9" class="pgmFirstRow div_2_5 row5 span1hr">Twisted</div>
<div id="programe10" class="pgmFirstRow div_2_6 row6 span1hr">Pretty Little Liars</div>

In this case, since programe2 has a span1hr class and programe3 has a span0hr class, I would want those classes changed to span1hrfor30mins.

One additional complication: as you can see, I have multiple sets of row2 - row6 classes, and need to do this search within each set of rows.

I have tried code like this, but would need to duplicate this for row2-3, row3-4, row4-5 and row5-6.

if($('.span1hr').hasClass('row3') && $('.span0hr').hasClass('row4'))
{
  $('.span1hr').each(function(i,e)
  {
    if($(e).hasClass('row3') && $(e).hasClass('.span1hr'))
    {
      $(e).attr('row3'); $(e).removeClass('span1hr').addClass('span1hrfor30mins');
    }
  });
}

Does anyone know how I can do this?

Upvotes: 0

Views: 141

Answers (1)

cgross
cgross

Reputation: 1952

If I understand this correctly you need to check the class of the next element if the current element has a certain class.

Since you are using jQuery try the .next() function. Something like this

 $('.pgmFirstRow').each(function(index, element) {
   element = $(element);
   if(element.hasClass('span1hr') && element.next().hasClass('span0hr')) {
      element.removeClass('span1hr').addClass('span1hrfor30mins').next().removeClass('span0hr').addClass('span1hrfor30mins');
   }
 });

Upvotes: 1

Related Questions