jQuery CSS 选择器问题

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') 不是 select 或者，它是 setter。您将 display: block 设置为所有 divs，然后将红色 background 也设置为所有。它被称为 chain.

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

有很多方法可以 select 正确 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>

Answer 2

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

Answer 3

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

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

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

Answer 5

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

如果您只想 select 可见 div 着色，请尝试使用 select 或 :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 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 选择器问题

jQuery CSS Selector issue

css

jquery

jquery-selectors