Question

如何使用它的样式属性在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＆＃39;

Answer 1

如果样式设置为内联，则可以使用属性选择器：

 $('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，Chrome等）除非定位，否则不会返回z-index值。见example

此外，for循环仍然是faster而不是.filter（）

Answer 2

没有样式选择器（它如何工作，样式是继承和显式声明的规则的组合），但您可以过滤（demo）：

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

现在，如果您使用z-index将一段数据附加到HTML元素，那么您可能会更幸运地使用数据属性（更干净，可以通过Sizzle搜索）。一种解释可能如下所示：（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>

使用jquery按样式查找元素

2 个答案: