How would I remove an ID and the add a different ID to my nav ul

Question

I'm trying to add a different ID to my nav's ul-list.

What am I doing wrong?

Can you add and remove ID's in jQuery or do I need to use JavaScript?

 $(window).scroll(function () {
        if ($(document).scrollTop() == 0) {
            $('#logo_top').removeClass('remove-logo');
        } else {
            $('#logo_top').addClass('remove-logo'); 
        }
    });
    $(function(){
        $('#navi').data('size','big');
    });

    $(window).scroll(function(){
        if($(document).scrollTop() > 0)
        {
            if($('#navi').data('size') == 'big')
            {
                $('#navi').data('size','small');
                $('#navi').stop().animate({
                    height:'58px'
                },600);
                $('#navi-top ul').remove();
                $('#navi-top-small ul').add(); 
            }
        }
        else
        {
            if($('#navi').data('size') == 'small')
            {
                $('#navi').data('size','big');
                $('#navi').stop().animate({
                    height:'122px'
                },600);
            }  
        }
    });

this is the html for my site im trying to target the ul any suggestions?

<div id="navi-top" class="push-off-right-s">
    <ul>
        <li><a href="#">The Group</a></li>
        <li><a href="#" class="active">Working Together</a></li>
        <li><a href="#">Paymaster</a></li>
        <li><a href="#">Claybrook</a></li>
        <li><a href="#">Vote for a sidekick</a></li>
    </ul>
</div>

you can manipulate the ID but i dont think thats wise.. `.attr('id', 'newID')` would do it. — JF it, Mar 28 '14 at 14:10
#navi-top-small ul thats the ID i wana add i want to remove the original one......or can i add and remove css property instead of changing the entire ID. the value im trying to target in the css is margin: 32px 0 0 0 i need to set it to margin: -32px 0 0 0 when the user scrolls down the page — Code, Mar 28 '14 at 14:12
I've never actually come across a situation where I needed to remove or rename Id's (or where it was appropriate)... I would stick to just switching around classes instead... It's doable, but you open yourself up to a lot of headache potentially... — Rikon, Mar 28 '14 at 14:14
Why not use the `addClass` and `removeClass` as used on `#logo_top`? — Digzol, Mar 28 '14 at 14:14
This line `$('#navi-top ul').remove();` remove's that entire list from the DOM, fyi. — tymeJV, Mar 28 '14 at 14:16
add() method wrong. I think you are trying to append() or addClass() — Bhojendra Rauniyar, Mar 28 '14 at 14:18

score 0 · Answer 1 · answered Mar 28 '14 at 14:15

0

The ID is an attribute value you set by passing it as a parameter:

$('#navi-top ul').attr('id','your value');

answered Mar 28 '14 at 14:15

Kristofer Gisslén

1,252
1
11
28

so how would i change it? like do i say $('#navi-top ul').attr('id','your value').remove(); – Code Mar 28 '14 at 14:25
If you want to remove the attribute you need to use `.removeAttr("id")`. ie. `$('#navi-top ul').removeAttr("id");`. But to be honest I'd rather use classes instead: `$('#navi-top ul').removeClass('your class name').addClass('new class name');` – Kristofer Gisslén Mar 28 '14 at 14:39

score 0 · Accepted Answer · edited May 23 '17 at 12:11

An element id should be used to identify an element. If you want to dynamically change the CSS then you should use a class. See Difference between id and class in CSS and when to use it

So the lines

$('#navi-top ul').remove();
$('#navi-top-small ul').add();

should be something like

$('#navi-top').addClass('navi-top-small');

CSS:

.navi-top-small ul {
    margin: -32px 0 0 0;
}

Then depending on what your needs are you might want to add a removeClass('navi-top-small') in your else clause.

How would I remove an ID and the add a different ID to my nav ul

2 Answers2