2011-08-09 11 views
0

複合セレクタを使用していますが、ChromeとFirefoxなどで正常に動作します。 Internet Explorer 8では失敗します。私はまだ古いバージョンでそれをテストしていない。jQueryアドバンストセレクタがInternet Explorer 8で失敗する

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'> 
    <html> 
     <head> 
       <title>Title</title> 
       <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'>   </script> 
       <script type='text/javascript'> 
        $(function(){ 
          $('span[style*="left:20px"][style*="width:100%"]').css({color:'red'}); 
          $('#first').css({color:'blue'}); 
        }); 
       </script> 
     </head> 
     <body> 
       <span id='first' style='left:20px; width:100%;'>Should be red</span> 
       <span id='second' style='left:30px; width:100%;'>Should be blue</span> 
     </body> 
    </html> 

ただ文脈に入れるには、no、スパンが常に同じスポットになりませんので、私はスパンにクラスやIDを追加することはできません、と私は彼らに基づいてCSSを調整する必要があります(他の興味深い理由で、私はそれらを移動するコードを編集できません)、私は外部スタイルを使用することはできません。

私はIEでこの作業を行うために欠けているものがありますか?できない場合は回避策を提案できますか?

$('span').each(function() { 
    if(this.style.left == "20px" && this.style.width == "100%") { 
     $(this).css({color:'red'}); 
    } 
}); 

フィドル:ここ

は、ここでの回避策だJSFiddle http://jsfiddle.net/RMzuh/1/

+0

あなたのフィドルフォームと投稿のコードフォームを一致させる必要があります。あなたは同じHTML構造を投稿しませんでした。 –

+0

ありがとう、ありがとう。 – Kirk

+0

例では、最初のテキストを赤、次に青に設定します。「赤でなければなりません」というテキストは青で、「青でなければならない」というテキストはデフォルトの黒です。 – Guffa

答えて

1

です。またhttp://jsfiddle.net/mrchief/RMzuh/16/

、あなたがpositon:absolute;または類似を設定しない限りleft:20pxは効果がありませんということに気づきます。私は代わりにあなたがIE9とIE9互換表示でテスト.filter()

$('span[style]').filter(function() { 
    return this.style.left === "20px" && this.style.width === "100%"; 
}).css({ 
    color: 'red' 
}); 

Updated jsfiddle

(両方ともオリジナルフィドルで失敗しました)

0

個人的には、あなたがやっているやり方にマッチするスタイルがまったく驚いています。どこかに1つのスペースがあると、それを捨てることができます。これらのオブジェクトのstyle属性にgetAttributeを実行すると、コロンの後ろにスペースがあり、実際にコロンの後のマッチストリングにスペースを入れると、あなたのテクニックはIE9で動作します。つまり、あなたの技術はブラウザ特有のものです。それに近づく良い方法の時間。

私は、あなたがMrchiefが提案するようなもっと決定的な回避策を提案するでしょう。

this fiddleではIE9で動作していますが、以前のバージョンでは動作しませんが、新しいバージョンではChromeで動作しないため、別の方法が必要であることを確認できます。

0

を使用することができ、複雑なセレクタの

0

スタイルプロパティの内容を、設定する文字列とまったく同じにすることはできません。 Internet Explorerはスタイルをleft: 20px; width: 100%;として標準化しているため、余分なスペースによってjQueryセレクタが機能しなくなります。

style属性でコロンの後にスペースを使用すると、Internet Explorer、Firefox、Chrome、Opera(デモ:http://jsfiddle.net/psfWN/1/)で動作しますが、他のブラウザについては何も言えませんそれはあなたがそこにいくつかのブラウザで異なる動作を見つけることは非常に可能性があります。特定の方法でスタイルの書式に依存することはできないため、重要な機能の場合は別の方法を見つける必要があります。

関連する問題