Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Selectors: Select element with specific class and 'title' attribute

This should be an easy one, but I can't find a good example anywhere. I'm trying to select a particular element on my page that has a class of 'statuslight' and a title attribute of one of three options. The option (it will depend) is stored in a variable called 'currentStatus'. I've seen some examples, and I'm guessing this is the right track, but I need to know for sure:

$(".statuslight[title]='" + currentStatus + "'"); 
like image 304
MegaMatt Avatar asked Jan 27 '10 22:01

MegaMatt


People also ask

How do I select a specific class in jQuery?

In jQuery, the class and ID selectors are the same as in CSS. If you want to select elements with a certain class, use a dot ( . ) and the class name. If you want to select elements with a certain ID, use the hash symbol ( # ) and the ID name.

What jQuery syntax selects HTML elements by a specific attribute and its value?

The [attribute|=value] selector selects each element with a specified attribute, with a value equal to a specified string (like "en") or starting with that string followed by a hyphen (like "en-us").

How do you select an element with a class name example?

To select elements with a specific class, write a period (.) character, followed by the name of the class. You can also specify that only specific HTML elements should be affected by a class. To do this, start with the element name, then write the period (.)

Which selects elements that have the specified attribute with a value beginning exactly with a given string?

attributeStartsWith selector Description: Selects elements that have the specified attribute with a value beginning exactly with a given string.


1 Answers

Very close:

$(".statuslight[title='" + currentStatus + "']"); 

Supposing your currentStatus is an array, you could get all statuslight elements with a title that contains any of the currentStatus values with:

$(".statuslight[title='" + currentStatus[0] + "'], .statuslight[title='" + currentStatus[1] + "'], .statuslight[title='" + currentStatus[2] + "']"); 

Alternatively, if your title has multiple statuses (title="status1 status2 status3"), and currentStatus is only one item you would use this selector:

$(".statuslight[title~='" + currentStatus + "']"); 
like image 71
Joel Avatar answered Sep 29 '22 20:09

Joel