jQuery CSS Selector issue

Question

In the following code, after the jQuery runs, I expected only 2 to be seen with background red.

However, after jQuery runs, I can see 1, 2 and 3 with their backgrounds red.

Where is the glitch?

HTML

<html>
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <script>
        $(document).ready(function(){
            $('div').css('display','block').css('background','red');
        });
    </script> 
</head> 
<body> 
    <div style="display:none">1</div>
    <div style="display:block">2</div> 
    <div style="display:none">3</div> 
</body> 
</html>

Output

What is the requirement?

Samir
– Samir

2016-09-21 09:31:44 +00:00
Commented Sep 21, 2016 at 9:31 — Samir
– Samir, Commented Sep 21, 2016 at 9:31

eisbehr · Accepted Answer · 2016-09-21 09:35:55Z

3

.css('display','block') is not a selector, it's a setter. You set display: block to all divs and then set a red background to all too. It's called a chain.

$('div')     .css('display','block').css('background','red');
//^ selector  ^ first setter         ^ second setter

There are plenty of ways to select the correct div.

$("div:visible").css({display: "block", background: "red"});
$("div").filter(":visible").css({display: "block", background: "red"});
$("div[style='display:block']").css({display: "block", background: "red"});
$("div:eq(1)").css("display", "block").css({display: "block", background: "red"});
$("div").eq(1).css("display", "block").css({display: "block", background: "red"});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="display:none">1</div>
<div style="display:block">2</div>
<div style="display:none">3</div>

edited Sep 21, 2016 at 9:35

answered Sep 21, 2016 at 9:29

eisbehr

12.5k8 gold badges42 silver badges65 bronze badges

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

Comments

Pete · Accepted Answer · 2016-09-21 09:32:44Z

2

Your jquery is working correct, you have first set all divs to be block and then coloured them red.

If you only want to select the visible div to colour, try using the selector :visible

$(document).ready(function() {
  $('div:visible').css('background', 'red');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div style="display:none">1</div>
<div style="display:block">2</div>
<div style="display:none">3</div>

answered Sep 21, 2016 at 9:32

Pete

58.8k31 gold badges132 silver badges187 bronze badges

Comments

Safal Pillai · Accepted Answer · 2016-09-21 09:29:56Z

0

The jquery code is overriding the inline style. Set which divs to be displayed from the script.

answered Sep 21, 2016 at 9:29

Safal Pillai

1,6571 gold badge17 silver badges31 bronze badges

Comments

Dennis Novac · Accepted Answer · 2016-09-21 09:30:04Z

0

Remove the .css('display','block') :

<html>
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <script>
        $(document).ready(function(){
            $('div:visible').css('background': 'red');
        });
    </script> 
</head> 
<body> 
    <div style="display:none">1</div>
    <div style="display:block">2</div> 
    <div style="display:none">3</div> 
</body> 
</html>

answered Sep 21, 2016 at 9:30

Dennis Novac

1,01110 silver badges23 bronze badges

Comments

Richard Housham · Accepted Answer · 2016-09-21 09:31:55Z

0

You are selecting them all and then setting the display as block with background red I think something like this

$('div:visible').css('background','red');

answered Sep 21, 2016 at 9:31

Richard Housham

1,6782 gold badges16 silver badges33 bronze badges

Comments

supernova · Accepted Answer · 2016-09-21 09:50:49Z

0

If you expect only 2 to be seen with background red, Please try this.

<html>
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <script>
        $(document).ready(function(){
            $('div').each(function(){    
                if ( $(this).css('display') == 'block')
                {
                    $(this).css('background', 'red');
                }
            });
        });
    </script> 
</head> 
<body>

answered Sep 21, 2016 at 9:50

supernova

2981 gold badge3 silver badges15 bronze badges

3 Comments

eisbehr Over a year ago

Really, don't use each for such tasks!

supernova Over a year ago

Thank you for your suggestion. could you edit the html code without using each function for me?

eisbehr Over a year ago

Just take a look at my answer.

Collectives™ on Stack Overflow

jQuery CSS Selector issue

6 Answers 6

Comments

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related