jquery changing one css attribute of one specific html element

Question

I have looked but have not found a specific answer for changing just one attribute. Here is an example I cooked: I only want to change the display attribute.

<html>
    <head>
        <title>
            test
        </title>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            a.move {
                height: 25px;
                width: 25px;
                display: inline-block;
                border: 1px #aaa solid;
                border-radius: 5px;
                text-align: center;
                text-decoration:  none;
                color: black;
            }
            a.move:hover {
                background-color: #aaa;
            }

---v This is the important css part

            li {
                display: inline-block;
                width: 370px;
                border: 1px #aaa solid;
            }

---v This is the important css part

        </style>
        <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">
            var current = 1;
            var wait = 0;
            function next(){
                current++;
                update();
            }
            function prev(){
                current--;
                update();
            }

---v This is the important jquery part

            function update(){
                $('p').text(current);
                $('li').each(function(index) {
                    if(index != current)
                        $(this).css('display','none');
                    else
                        $(this).css('display','inline');

                });
            }

end of the important part ---^

            $(function(){
                update();
                $('a.move.left').click(function(e){
                    if(wait) return;
                    e.preventDefault();
                    prev();
                });
                $('a.move.right').click(function(e){
                    if(wait) return;
                    e.preventDefault();
                    next();
                });
            });
        </script>
    </head>
    <body>
        <p> ... </p>
        <a class="move left" href="a">&lt;</a>&emsp;<a class="move right" href="b">&gt;</a></br>
        <ul>
            <li>123</li><!--
            --><li>123</li><!--
            --><li>456</li><!--
            --><li>789</li><!--
            --><li>abc</li><!--

            --><li>edf</li><!--
            --><li>ghj</li><!--
            --><li>!@#</li><!--
            --><li>$%^</li><!--
            --><li>ABC</li>
        </ul>
    </body>
</html>

Please advise. Currently, what happens is that it removes all the other css attributes. I could set all the attributes every time but I do not wish to.

Thanks

Don't quite understand which li do you want to change but you are using the each function which changes each of every li element. — Shawn Ang
– Shawn Ang, Commented Jun 19, 2012 at 8:52
Could you explain in more detail the "removes all the other CSS attributes" part of the question? It seems to be OK in this demo — andyb
– andyb, Commented Jun 19, 2012 at 8:54

Christoph · Accepted Answer · 2012-06-19 09:00:26Z

2

Modifying the css directly is (in most cases) not a good option.

instead either use:

$(this).show() and $(this).hide()

or (my personal preference, since this is even more flexible):

$(this).toggleClass("...") and create according CSS-classes in your stylesheet.

Additionaly, you are changing the css of ALL you liitems: $('li').each - is this really what you want?

The .css() method only changes the css-attribute you specify - it does not override other styles. If this seems to be the case, the problem probably lies somewhere else in your code.

edited Jun 19, 2012 at 9:00

answered Jun 19, 2012 at 8:53

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AturSams Over a year ago

Yeah, I changed to inline instead of back to inline-block and I was surprised that I was losing the width. Thanks :)

AturSams Over a year ago

I also noticed I don't need to iterate with .each and could simple use the eq() selector

Christoph Over a year ago

@ArthurWulfWhite you are welcome. I was wondering if it is just the inline declaration with losing the width but then i forgot to write this in my answer;)

Asif · Accepted Answer · 2012-06-19 09:06:42Z

1

Use

$(this).toggle()

or If you want to show or hide use show and hide as you required.

$(this).show() 
$(this).hide()

answered Jun 19, 2012 at 9:06

Asif

2,67721 silver badges25 bronze badges

Comments

Brian · Accepted Answer · 2012-06-19 08:51:32Z

0

Instead of that, why now use:

$(this).show() or $(this).hide() as needed... ot $(this).toggle() ....

answered Jun 19, 2012 at 8:51

Brian

8,6212 gold badges27 silver badges32 bronze badges

Comments

Pablo Romeo · Accepted Answer · 2012-06-19 08:52:54Z

0

In jquery you can hide or show elements using:

$(this).show() or $(this).hide() instead of changing the css.

answered Jun 19, 2012 at 8:52

Pablo Romeo

11.4k2 gold badges32 silver badges60 bronze badges

Collectives™ on Stack Overflow

jquery changing one css attribute of one specific html element

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related