-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

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

 $('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 回答
2

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

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

现在，如果您使用z-index将一段数据附加到 HTML 元素，您可能会更幸运地使用数据属性（更清晰，可通过 Sizzle 搜索）。一种解释可能如下所示：（演示）

<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 回答