jQuery CSS选择器问题

在下面的代码中，jQuery运行后，我预计只有2个背景红色。jQuery CSS选择器问题

但是，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>

输出

来源

2016-09-21 Deadpool

有什么要求？ – Samir

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

来源

2016-09-21 09:29:52 eisbehr

jQuery的代码重写内联样式。设置从脚本显示哪些div。

来源

2016-09-21 09:29:56

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

来源

2016-09-21 09:30:04

您选择所有这些，然后与后台设置显示为块红红的，我觉得这样的事情

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

来源

2016-09-21 09:31:55

你jQuery是工作正确的，你有首先将所有div设为block，然后将它们涂成红色。

如果你只需要选择可见格颜色，试试如果你希望只2与红色背景中可以看出使用选择: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>

来源

2016-09-21 09:32:44 Pete

，请试试这个。

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

来源

2016-09-21 09:50:49

真的，不要把'each'用于这样的任务！ – eisbehr

感谢您的建议。你可以编辑HTML代码而不使用每个函数吗？ –

只需看看[我的答案]（http://stackoverflow.com/questions/39612588/jquery-css-selector-issue/39612641#39612641）。 – eisbehr

jQuery CSS选择器问题

回答

相关问题