按jquery樣式查找元素

如何使用樣式屬性在HTML文檔中查找元素？這裏有一個例子：按jquery樣式查找元素

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。以及如何與z-index=8選擇所有div的...

來源

2013-03-20 Majed DH

我建議閱讀jQuery選擇器文檔。 http://api.jquery.com/category/selectors/ – 2013-03-20 21:44:06

'$（'li [style * ='z-index：4「]'）（不要使用'='而是'：'來分隔css順便說一下，屬性和值）。 – 2013-03-20 21:45:28

我應該問，如果您使用z-Index將數據附加到HTML元素。如果是這樣，爲什麼不只是'data'屬性，它是這樣設計的：http://api.jquery.com/data/它可以和選擇器 – 2013-03-20 21:59:44

如果樣式設置爲inline，可以使用屬性選擇：

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

看到here。這種方法的優點是速度非常快。

如果樣式是通過樣式設置，您可以訪問它這樣說：

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瀏覽器，瀏覽器等），將不返回的z-index值，除非它的定位也是如此。看到這個example

而且，循環仍faster比.filter（）

來源

2013-03-20 21:45:28 Jlange

一起工作我冒昧地測試了兩個關於性能的答案，這是最快的。比使用'.filter（）'更快的方式 [看jsperf.com]（http://jsperf.com/jquery-attribute-style-selector） – 2013-03-20 21:55:28

哇嘶嘶聲引擎繼續給我驚喜！幹得好！ – Jlange 2013-03-20 21:57:40

如果我使用'〜='而不是'* ='，它也可以，對不對？ – 2013-03-20 22:01:08

沒有一種風格選擇（如何將它的工作，風格的繼承和明確說明規則的組合），但您可以過濾（demo）：

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

現在，如果你正在使用z-index一塊數據附加到HTML元素你可能會（通過灒清潔，搜索）在使用數據屬性更多的運氣。一種解釋可能是這樣的：（demo）

<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-20 21:47:04

好吧，'$（this）'返回'li'元素，對吧？ – 2013-03-20 21:53:46

屬性選擇器包含'* ='，它基本上測試樣式屬性是否包含字符串。 – Jlange 2013-03-20 21:55:59

在這個例子中，$（「li」）返回所有'li'元素，過濾器遍歷每個元素（'$（this）'代表單個'li's）。如果條件評估爲true，則返回false，否則將丟棄該條件。 – 2013-03-20 21:56:14

按jquery樣式查找元素

回答

相關問題