5

従来の ASP から生成されたこの単純な html マークアップがあります。

<table>
  <tr class="trClass">
    <td>Hello </td>
  </tr>
  <tr class ="trClass">
    <td>World!</td> 
  </tr>
</table>

Jquery を使用して Hello に属する tr を hide() に設定すると、非表示になります。良い！

しかし、これを使用すると $('.trClass:visible').each(function() { alert('visible') }); 出力「可視」が2回表示されます。

どうしてこれなの？

ここでの問題は、選択ボックスを使用して列のテーブルをフィルタリングすることです。しかし、フィルタリングした後、テーブルに表示されている行に対していくつかの計算を実行する必要がありますが、今すぐすべての行を取得します。

何か案は？

/ダニエル

4

4 に答える 4

13

:visibleセレクターはdisplayスタイル プロパティをテストしません。代わりに使用する必要があります。1.3.2:hiddenリリースノートには次のように書かれています。

...要素の CSS 表示が「なし」の場合、またはその親/祖先要素の表示のいずれかが「なし」の場合、または要素の幅が 0 で要素の高さが 0 の場合、要素は非表示として報告されます。

これらは、表示されている行を正しく選択します。

$('.trClass:not(:hidden)').each(function() { 
    alert('visible'); 
});

また：

$('.trClass').each(function() { 
    if(!$(this).is(':hidden')) {
        alert('visible'); 
    }
});

また：

$('.trClass').filter('not:(:hidden)').each(function() { 
    alert('visible');
});

hideスタイルを に設定しdisplay="none"ます。jQuery 1.3.2のリリース ノートにも次のように書かれています。

jQuery 1.3.2 では、ブラウザーから報告された offsetWidth または offsetHeight が 0 より大きい場合、要素は表示されます。

したがって、この場合、 CSSプロパティがに設定されていない:visibleにもかかわらず、実行された計算に従って行がスペースを占有していないため、セレクターは誤って何にも一致していないと思います。逆に、要素と正しく一致するため、非要素のテストは問題なく機能します。displaynone:hiddenstyle="display:none":hidden

于 2009-09-28T11:15:45.777 に答える
4

正当なバグを発見しました。1.3.2 で壊れていましたが、現在はトランクで修正されています。

Resigによると：

IEで同じ問題を抱えている「tr」のケースをすでに探しています

あなたが知りたいと思った...

于 2009-09-28T14:21:58.733 に答える
2

これが問題かどうかはわかりませんが、hide() は設定されdisplay: none;ていませんvisible: hiddenか? 非表示の行がまだ表示されていることを意味しますが、表示されていません...

于 2009-09-28T11:16:59.270 に答える
0

ほとんどの場合、trClassがディスプレイと衝突します。.hide（）が設定するものはありません。タグにクラス属性とスタイル属性の両方がある場合にのみ適用されます。trClassを綿密に調べて、ディスプレイを取り出す必要があります。

于 2009-09-28T14:01:55.260 に答える