Locate elements on the page using jQuery selector

Question

I am currently using (eg) this in the console

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

to highlight matched elements. However, this doesn't work well when those elements are hidden. Is there a good way of doing it?

EDIT: TO CLARIFY , I am only using the input tag as an example, and when I mean hidden I am talking about an element where it could be outside of the window, inside a hidden container, height 0, or whatever hard to find. Generally not visible basically, not just display: none; .

My concern is to locate all the matched elements for development purposes. This question is not about how to make something purple!

Answer 1

可能是这样的：

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

Answer 2

You could show the hidden elements before trying to change the background.

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

If the parent is hidden, show the parent first, then change the background color.

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

Answer 3

This should work:

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