-1

スタイル プロパティを使用して HTML ドキュメント内の要素を見つけるにはどうすればよいですか? 以下に例を示します。

HTML:

<ul>
   <li style='z-index=1;'>e1</li>
        <div style='z-index=8;'>div</div>
   <li style='z-index=2;'>e2</li>
   <li style='z-index=3;'>e3</li>
   <li style='z-index=4;'>e4</li>
   <li style='z-index=5;'>e5</li>
<ul>

問題は、たとえば、どのように選択するかです..: を持つ<li>要素z-index=4。divそして、すべてを選択する方法z-index=8...

4

2 に答える 2

2

スタイルセレクターはありませんが（どのように機能するか、スタイルは継承されたルールと明示的に指定されたルールの組み合わせです）、フィルターをかけることができます（デモ）：

var things = $("li").filter(function() {
  return $(this).css('z-index') == '4';
});

これで、データの一部をHTML要素に添付するために使用z-indexしている場合、データ属性（よりクリーンで、Sizzleで検索可能）を使用すると、より多くの運が得られる可能性があります。1つの解釈は次のようになります:(デモ）

<div data-id='8'>div</div>
<ul>
  <li data-id='1'>e1</li>
  <li data-id='2'>e2</li>
  <li data-id='3'>e3</li>
  <li data-id='4'>e4</li>
  <li data-id='5'>e5</li>
<ul>
<script>
  alert($('[data-id=4]').text())
  alert($('[data-id=8]').text())
</script>
于 2013-03-20T21:47:04.777 に答える
2

スタイルがインラインに設定されている場合は、属性セレクターを使用できます。

 $('li[style*="z-index:4"]') //returns any li's with z-index = 4

ここを参照してください。この方法の利点は、非常に高速であることです。

スタイルがスタイルシートを介して設定されている場合は、次の方法でアクセスできます。

 var elem;
 var elems = $("li");

 for(var i=0; i<elems.length; i++) {
    if($(elems[i]).css('z-index') == '4') {
        elem = elems[i];  //assign elem we found
        break;            //exit loop early
    }
 }

注意Webkit ブラウザー (Safari、Chrome など) は、同様に配置されていない限り、z-index 値を返しません。この例を参照してください

また、 for ループは.filter()よりも高速です

于 2013-03-20T21:45:28.083 に答える