使用 jQuery 选择器在页面上定位元素答案

【问题标题】：Locate elements on the page using jQuery selector使用 jQuery 选择器在页面上定位元素
【发布时间】：2015-11-04 05:24:46
【问题描述】：

我目前在控制台中使用（例如）这个

> $("input[type='text']").css("background", "purple")

高亮匹配的元素。但是，当这些元素被隐藏时，这将无法正常工作。有什么好的方法吗？

编辑：澄清，我仅使用input 标签作为示例，当我的意思是隐藏时，我指的是一个元素，它可能位于窗口之外，在隐藏的容器，高度 0，或任何难以找到的东西。一般基本不可见，不只是display: none;。

我关心的是定位所有匹配的元素以用于开发目的。这个问题不是关于如何把东西变成紫色的！

【问题讨论】：

喜欢$("input[type='text']").show().css("background", "purple") ?
@WouterHuysentruit 不，如果这些元素位于另一个隐藏的容器中，我的意思是更多。
@Sarke，隐藏是什么意思？如果是type="hidden"，则更改您的选择器以反映这一点，否则如果元素被css隐藏，它不应该有所作为，jQuery仍然会选择它们
@AmmarCSE 我说的是任何不可见的元素，而不仅仅是带有display: none; 的元素。例如，它可能在窗口外、隐藏容器内或高度为 0。
@Sarke，这些都不重要，jQuery 选择器仍然会获取它们，除非它们位于单独的 iframe 中。你能在小提琴中重现这个问题吗？

【解决方案1】：

可能是这样的：

$("input[type='text'], input[type='hidden']").css("background", "purple")

【讨论】：

【解决方案2】：

您可以在尝试更改背景之前显示隐藏的元素。

$("input[type='text']").show();
$("input[type='text']").css("background", "purple")

如果父项被隐藏，则先显示父项，然后更改背景颜色。

$("input[type='text']").parent().show();
$("input[type='text']").css("background", "purple")

【讨论】：

【解决方案3】：

这应该可行：

$("input[type='text'], input[type='text']:hidden").
    show().
    css("background", "purple");

【讨论】：