jveryで塗りつぶし色でSvgパスを選択

Question

私のsvgにすべての白い塗りつぶしのパスを表示しません。

このように構成されたSVG想像：

<svg> 
    <path class="pathok"fill="rgb(29,233, 182)"/> 
    <path class="pathok" fill="rgb(255, 255, 255)" /> 
    <path class="pathok" fill="rgb(255, 255, 255)" /> 
    <path class="pathok" fill="rgb(255, 255, 255)"/> 
</svg> 

私はこれを試してみたが、動作していない：

<script> 
    if ($("path").attr("fill") == ("rgb(255, 255, 255)")) { 
     $(this).css("display","none") 
    } 
</script> 

一般的に、私は彼の属性の値によってタグを選択することができる方法を？

Answer 1

セレクタが個別のパスではなくすべてのパスを取得しています。

これを試してみてください：

$(document).ready(function(){ 
    var $paths = $('path'); // Get all paths 
    for (var i=0;i<$paths.length;i++){ // Iterate through each one 
     var $path =$($paths[i]); // This gets a single path 
     if ($path.attr("fill") == ("rgb(255, 255, 255)")) { 
      $path.css("display","none"); 
     } 
    } 
}); 

Answer 2

あなたはちょうどあなたが直接、何のループは必要ありませんしたい要素を選択することができます。

私は、あなたが提供していない属性とd属性を使用していますが、原理は同じです。

$("rect[fill='rgb(255, 255, 255)']").css('display', "none");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg> 
 
    <rect width="90" height="30" fill="black"/> 
 
    <rect width="10" height="10" x="10" y="10" fill="rgb(29,233, 182)"/> 
 
    <rect width="10" height="10" x="30" y="10" fill="rgb(255, 255, 255)" /> 
 
    <rect width="10" height="10" x="50" y="10" fill="rgb(255, 255, 255)" /> 
 
    <rect width="10" height="10" x="70" y="10" fill="rgb(255, 255, 255)"/> 
 
</svg>