使用jQuery进行复杂查询

Question

如何使用jQuery查询DIV，visible和z-index > 0的任何id != ""元素。

我目前使用document.getElementsByTagName进行原始线性搜索，但我被告知这会对性能产生过大的影响。在包含400多个div的页面上，需要花费大量时间来执行。

有人告诉我，使用jQuery，您可以执行更复杂的查询。这可能吗？

请记住，我完全无法控制这些弹出式DIV的ID，因此我无法使用“众所周知的”ID。

谢谢。

Answer 1

jQuery具有very rich set of selectors（几乎所有CSS3和少数额外内容）。结合方便的filter功能，您可以做很有用的事情：

var divsWithZIndexAndID = $('div:visible[id!=""]').filter(function() {
    return parseInt(this.style.zIndex, 10) > 0;
});

特别关注元素内联样式的z-index。如果您需要计算样式，请使用css。

var divsWithZIndexAndID = $('div:visible[id!=""]').filter(function() {
    return parseInt($(this).css("z-index"), 10) > 0;
});

（style.zIndex和css都返回字符串，因此parseInt。JavaScript无论如何会自动生成一个数字，但使用parseInt让我明白应该应用的基数。）

Answer 2

将查询分成可由jQuery选择器处理的部分（例如搜索具有非空id属性的可见元素）和不能查询的部分（例如z-index不等式过滤）。然后，您可以将第一类过滤器编码为普通选择器，第二类过滤器使用filter函数和任意谓词。

示例：

$("div:visible[id!='']").filter(function()
    { return parseInt($(this).css("z-index")) > 0; }
);

Answer 3

var $objs = $('div:visible[id!=""]').filter(function() {
   return this.style.zIndex > 0;
});

您应该在this.style.zIndex等于auto时添加处理。