Loop set of elements in jquery

Question

$('form td .hint p')this jquery selector returns a list [p,p,p,p,p,p].

I would like to know what is the best way to go through each of them, check their css values ​​and do something if css = something I want.

I have this function to show and hide the tooltip, but I want only one tooltip to appear at a time. Performing the mouse and mouse, it does not work correctly, because currently I use parent (), next () and child () to find the element I need, and jquery instantly inserts a div wrapper around the element that I show and hide, Therefore basically I'm trying to get all the other p elements that have a display: block every time I hover over it.

Currently doing this:

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

Use each():

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

The reason this fails:

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

is that target[0]it is not a jQuery object. You can do it:

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

Also, if you read the documentation for css():

Returns a style property on the first matched element.

Two other issues worth mentioning.

Firstly, I would not recommend doing the hint myself. Get one of many plugins for this. I previously used this and did this work.

Secondly, if you are checking CSS display values, it might be useful to use a shortcut. For example, you can do this:

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

:hidden :visible, :

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

css() , , .