按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样式查找元素

回答

相关问题