#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2006
    Posts
    168
    Rep Power
    22

    How to check on the elements to change the class?


    Hi guys,

    I need your help with my jquery code. I have got two different elements with two different classes, with the element id: 'row3' including with the class: '.span1hr' and element id 'row4' with the class '.span0hr'

    I want to find on those two different elements with two classes before change on each class that matching with two different elements and classes that i am exactly looking for while ignore the other elements that come with the same id and class.

    Here is for example:

    I have two elements with the same id 'row3' and with two same class 'span1hr'. i have two other elements with same id 'row4' with two different classes 'span0hr' and 'span1hr'.

    I want to check on the element 'row3' with class '.span1hr' and element 'row4' with class '.span0hr' then I want to find on on each element with class 'row3' and '.span1hr' with 'row4' and '.span0hr' while they match on each line then change the class i actually want.

    I have tried this:

    PHP Code:
        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');
            }
          });
        } 

    HTML generation code

    PHP Code:
        $('.mainWrap').append('' 
            
    '<div class="row" id="row'+i+'">' +
                
    '<div id="image'+i+'"class="channelList div_'+i+'1 row1"></div>' +
                
    '<div class="rowSubPgm">' +
                    
    '<div id="programe'+(programsNumber++)+'" class="pgmFirstRow div'+i+'2 row2"></div>' +
                    
    '<div id="programe'+(programsNumber++)+'" class="pgmFirstRow div'+i+'3 row3"></div>' +
                    
    '<div id="programe'+(programsNumber++)+'" class="pgmFirstRow div'+i+'4 row4"></div>' +
                    
    '<div id="programe'+(programsNumber++)+'" class="pgmFirstRow div'+i+'5 row5"></div>' +
                
    '</div>' +
                
    '<div id="programe'+(programsNumber++)+'" class="pgmFirstRow div'+i+'_6 row6"></div>' +
             
    '</div>' +
             
    '<div class="clear"></div>'); 


    Here is the html source from the webpage:

    PHP Code:
        <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">NCISLos 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

    It will change on every elements with the class using with the loops that it will not check on two different element with the classes. I want to find on two different elements with two different classes to match it then find the class with the element that change the class I actually want comparing with two elements and the classes.

    Does anyone know how i can do this?
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    Multiple elements on the same page may not have the same ID.

    The hasClass() method only works with classes, not other attributes.

    You would be more likely to get help if you provided an overview of what you're making.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2006
    Posts
    168
    Rep Power
    22
    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:

    Code:
       <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.

    Code:
        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');
            }
          });
        }
    Do you know how I can do this?
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,187
    Rep Power
    184
    You might want to look into the .next API. Then combine it with the .hasClass() API; to get the result you are looking for.

IMN logo majestic logo threadwatch logo seochat tools logo