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を選択する方法はたくさんあります。

$("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

あなたはそれらすべてを選択し、背景の赤とブロックとして表示を設定している私はあなたのjqueryのが正しい取り組んでいる。このような何か

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

出典

2016-09-21 09:31:55

、あなたが持っていると思います最初にすべてのdivをブロックに設定してから赤に色付けします。あなただけの色に見えるのdivを選択したい場合は

、あなたは唯一の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

答えて

関連する問題