Jquery firefox misbehavior

Question

$(' .middle.clear > .post_home:first ').css('padding-left', '270px !important'); 

Firefoxのこのコードは、要素1から始まりますが、Chromeでは要素0から始まります。 私はそれをどのように扱うべきですか？

Answer 1

あなたはとの時間の割合で同様の効果を得ることができます：

document.querySelector(".middle.clear > .post_home").style.paddingLeft = "270px"; 

!importantインラインスタイルは、常に私の知る限り、優先されるため、ここで不要です。

これは、jQueryオブジェクトを作成するためにjQueryが内部的に数百のコマンドを実行しなければならないため、はるかに高速で動作します。

IE7以下はquerySelectorをサポートしていませんが、this articleはIE7以下でquerySelectorを実装する優れた方法を提供します。

Answer 2

eq（）セレクタを使用して、トラバースしようとしている要素のセットのインデックスを指定してみてください。また、多くのクラスセレクタをネストしないようにすると、パフォーマンスが低下する可能性がありますので、を試してください。代わりにIDを使用してみてください。

また、！重要なタグを指定する場合は、CSSスタイルと重要なタグの間にスペースを入れないでください。以下のコードでは、クラスののpost_homeクラス要素が、のクリアとの中のの要素内の最初のに追加されます。

$('.middle.clear .post_home').eq(0).css('padding-left', '270px!important'); 

Answer 3

セレクタは:first、:last、:nth-child(2)のようにすべての子要素が一致する場合に機能します。あなたのケース $(' .middle.clear > .post_home:first ')に

を使用すると、すべての子要素がクラスpost_homeを持っており、それらのすべてがあなたのセレクタにマッチしている。ここ

<div class="middle clear"> 
<div class="post_home"> 
<!-- content --> 
</div> 
<!-- no other element of class other than post_home allowed here --> 
<div class="post_home"> 
<!-- content --> 
</div> 
<!-- no other element of class other than post_home allowed here --> 
<div class="post_home"> 
<!-- content --> 
</div> 
<!-- no other element of class other than post_home allowed here --> 
</div> 

構造

を以下のしていることを前提としています。 あなたはそれに一致しないいくつかの他の要素を持っているので、あなたはこの異常な動作をしています。 $(' .middle.clear > .post_home ')[0].style.paddingLeft = "270px";または $(' .middle.clear > .post_home ').get(0).style.paddingLeft = "270px";

ヒント：このようなセレクタを使用する場合は、ul li構造を使用してください。