Question

在下面的代码中，jQuery运行后，我预计只有2个背景为红色。

然而，在jQuery运行之后，我可以看到1,2和3的背景为红色。

故障在哪里？

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>

输出

Answer 1

.css('display','block')不是选择器，而是setter。您将display: block设置为所有divs，然后将红色background设置为全部chain。它被称为$('div') .css('display','block').css('background','red'); //^ selector ^ first setter ^ second setter。

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>

let digits = NSCharacterSet.decimalDigitCharacterSet()

Answer 2

你的jquery工作正常，你先将所有div设置为block，然后将它们涂成红色。

如果您只想选择要显示的可见div，请尝试使用选择器: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>

Answer 3

jquery代码覆盖了内联样式。设置要从脚本中显示的div。

Answer 4

删除.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>

Answer 5

您正在全部选择它们，然后将显示设置为背景为红色的块我认为是这样的

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

Answer 6

如果你只想看到背景为红色的2，请试试这个。

<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>

jQuery CSS Selector问题

6 个答案: