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選擇器問題

回答

相關問題