Grow your CSS skills. Land your dream job.

Changing ID of a div with jquery

  • # March 3, 2012 at 6:46 pm

    Hi
    Is there a simple way to change the id of a div by clicking on a link?
    Here is what I am going for:

    Link1 gives div id=1
    Link2 gives div id=2
    Link3 gives div id=3

    Div
    image changes

    Div
    text changes

    I am trying to make both an image and text change by clicking on the appropriate link.
    I figured I could change the id of div with the image and use a sprite to get the right part of the image to show up
    I would also like the text in the second div to change

    Any hep would be highly appreciated
    Thank you!

    Rob
    # March 3, 2012 at 7:53 pm

    look into ajax – and an easy way jQuery Ajax.

    http://api.jquery.com/jQuery.ajax/

    # March 3, 2012 at 8:01 pm

    I would go with assigning (and changing) unique classes to those DIVs and target that. To change the ID of a DIV is, in my opinion, defying the purpose of having IDs in the first place.

    Adding and removing classes is a breeze in jQuery.

    # March 3, 2012 at 8:04 pm

    I agree with both posts above
    but if you really need to

    $('ELEMENT2CHANGE').attr('id','NEWID');
    # March 3, 2012 at 9:04 pm

    Wonderful, how would I go about changing the classes of the div through links?

    # March 3, 2012 at 9:14 pm

    To add a class “-status-on” to an element that has id “blah-01″:

    $('#blah-01').addClass('status-on');

    To remove this class:

    $('#blah-01').removeClass('status-on');

    To add a class and remove another one:

    $('#blah-01').removeClass('status-on').addClass('status-off');
    # March 3, 2012 at 9:30 pm

    thank you.
    I’m sorry to push but I am very new to this.
    How would I do it with 3 links:


    Link 1 -> click changed class to 1
    Link 2 -> click changed class to 2
    Link 3 -> click changed class to 3



    # March 3, 2012 at 11:21 pm

    I’ve tested this:

    $(function() {
    $('#changing-text').click(function() {
    $('a').removeClass('class').addClass('one')
    .next('a').removeClass('class').addClass('two')
    .next('a').removeClass('class').addClass('three');
    });
    });
    # March 3, 2012 at 11:50 pm

    Oh that looks nice, thank you!! So what would my 3 links look like?

    # March 4, 2012 at 12:48 am

    This is the real elements:

    Link1
    Link2
    Link3

    Click me!

    And this is the CSS code:

    .one   {color:red;  }
    .two {color:green;}
    .three {color:blue; }

    When you click on #changing-text, the element will changed to red, then the next element will change to green and then the next next element will be blue.

    # March 4, 2012 at 5:11 am

    Maybe one questions that still covering me is, why do they still use the $('div').removeClass('geek').addClass('superman') if they just have one classname, while we can use a simpler way: $('div').attr('class', 'superman')

    ???

    Rob
    # March 4, 2012 at 6:04 am

    No idea Hompimpa – I just checked and attr() removes the previous class anyway – my initial thought was maybe it added the class and you still had to remove one. But obviously not. I think removeClass and addClass are more for when you have multipul classes and actually support function expansion better then than the attr() funtion (as you might add a class later that you don’t want removing…).

    # March 4, 2012 at 6:24 am

    @Robskiwarrior: Yeah, that’s why I said if we only have one class. And moreover, (I never tried to explore the JQuery deeper. It is very confusing) I think .addClass(), .removeClass() and .toggleClass() are derived from the .attr() function.

    Rob
    # March 4, 2012 at 8:28 am

    yea it probably is just an extension of the attr() function but we some extra flavour thrown in so you can have a little more control.

    # March 4, 2012 at 9:24 am

    Thank you :)
    In your example, it is when you click the text that the links get the new class and change color.

    http://jsfiddle.net/cunj2/

    I will try to work with it so that when you click the links the text changes color ie gets the right class according to the link that was clicked.
    Thank you for sharing the code with me and all your help.

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".