SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist Mr. Tech's Avatar
    Join Date
    Feb 2003
    Location
    Australia
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Replace tags with a certain className

    I'm trying to change the class of certain tags with a certain className...

    I'm using MooTools as the framework...

    My code:

    Code:
        var arrElements = document.getElementById('audio_inner').getElementsByTagName('a');
         for(var i=0; i<arrElements.length; i++){
            if (arrElements[i].className == 'select_bold') {
                var rid = arrElements[i].id;
                $(rid).toggleClass('select_normal');
            }
         }
    I have tested arrElements[i].className and arrElements[i].id and they seem to send the correct values but it won't toggle the class....

    I even tried replacing $(rid).toggleClass('select_normal'); with document.getElementById(rid).className = 'select_normal'; just incase it was a MooTools error.

    Any idea's what is wrong with my code?

  2. #2
    SitePoint Member
    Join Date
    Nov 2004
    Location
    TX
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you should be using 'getElementsByTagName' instead of 'getElementById'. You shouldn't use getElementById in this case because only one item on you page can have distinct id name. Whereas several tags with the attribute named 'audio_inner' can be used.

    Hope it helps

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    MooTools has the hasclass method

    Try using the MooTools methods instead, it may be easier.

    Code JavaScript:
    $('audio_inner').getChildren('a').each(arrElements, function(el, index) {
      el.toggleClass('select_bold');
    });

    You shouldn't need the select_normal class, the css for the element itself should be the normal itself.

    Code CSS:
    /* Normal style for audio_inner anchor
    #audio_inner a {
    }
    #audio_inner a.select_bold {
      font-weight: bold;
    }

    There are better ways of doing what you're after, but my rough understanding of MooTools should find that the above works fine.

  4. #4
    SitePoint Evangelist Mr. Tech's Avatar
    Join Date
    Feb 2003
    Location
    Australia
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers guys. I ended up using your MooTools class but had to tweak it a bit to make it work.

    I ended up having to put an id on the ul tag (which held the a tags) in order to get it to work.

    Code:
        $('audio_list').getChildren('li').getChildren('a').each(function(el) {
            if (el.hasClass('select_bold')) {
                el.removeClass('select_bold');
            }
        });
        $(id).toggleClass('select_bold');


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •