jquery - 循环遍历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() 的文档:

Return a style property on the first matched element.

还有两点值得一提。

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

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

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

但您也可以使用:hidden和 :visible选择器，所以:

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

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