循环遍历jquery中的元素集

Question

$('form td .hint p') 此 jquery 选择器返回一个列表 [p,p,p,p,p,p]。

我想知道循环遍历每个元素、检查它们的 css 值并在 css 值 = 我想要的东西时执行某些操作的最佳方法是什么。

我有这个功能来显示和隐藏工具提示，但我只想一次显示一个工具提示。在进行 mouseover 和 mouseout 工作时，它是有问题的，因为目前我正在使用 Parent()、next() 和 child() 来查找正确的元素，并且 jquery 会立即插入一个 div 包围我正在显示和隐藏的元素。所以基本上我试图强制所有其他具有 display:block 的 p 元素在每次鼠标悬停时隐藏。

目前正在这样做：

target = $('form td .hint p');
target[0].css('display') gives an error.

target.css('display') seems to only return the css of the first one.

Answer 1

使用 each()：

var displays = '';
$("p").each(function(i, val) {
  displays += "Paragraph " + i + ": " + $(this).css("display") + "\n";
});
alert(displays);

失败的原因

var target = $("p");
var display = target[0].css("display");

是 ： target[0] 不是 jQuery 对象。您可以这样做：

var display = $(target[0]).css("display");

此外，如果您阅读 css() 的文档：

返回第一个样式属性
匹配的元素。

还有两点值得一提。

首先，我不建议您自己制作工具提示。为此获取众多插件之一。我之前使用过这个并且它完成了这项工作。

其次，如果您要检查 CSS 显示值，可能有一个值得使用的快捷方式。例如，您可以这样做：

$("p").each(function() {
  if ($(this).css("display") == "none") {
    $(this).addClass("blah");
  }
});

但您也可以使用 :hidden 和 :visible 选择器，因此：

$("p:hidden").addClass("blah");

检查 css() 调用很大程度上不可靠，因为您只检查内联样式而不检查样式表值。