{"id":607,"date":"2021-05-17T13:15:07","date_gmt":"2021-05-17T11:15:07","guid":{"rendered":"http:\/\/strawberrycode.com\/blog\/?p=607"},"modified":"2023-05-17T15:14:03","modified_gmt":"2023-05-17T13:14:03","slug":"get-element-starting-with-class-in-js","status":"publish","type":"post","link":"http:\/\/strawberrycode.com\/blog\/get-element-starting-with-class-in-js\/","title":{"rendered":"How to get an Element Starting with Class Name: the * and ^ JavaScript Selectors"},"content":{"rendered":"\n

You certainly know *<\/code> and ^<\/code> as selectors in different programming languages. But you may have found some surprising (or frustrating) results while using them as JavaScript or jQuery selectors.<\/p>\n\n\n\n

Let’s say you want to access elements starting with a certain class name, for example, “fruit-“<\/em> in the following code:<\/p>\n\n\n\n

<div class=\"basket-item fruit-apple\">🍏<\/div><\/pre>\n\n\n\n
First, the syntax<\/h2>\n\n\n\n
Your first reflex may be to try something like that:<\/p>\n\n\n\n
\/\/ Incorrect syntax\n$('.^fruit-').doSomething(...) \/\/ Nope, that won't work...<\/pre>\n\n\n\n
The correct syntax is:  <\/p>\n\n\n\n
\/\/ Correct syntax\n$('[class^=\"fruit-\"]').doSomething(...)<\/pre>\n\n\n\n
Then, the selectors: ^ vs *<\/h2>\n\n\n\n
Using the ^<\/code> selector is correct, but its behavior is a bit too literal: it will get the very first element starting with the class name, or more specifically, the class starting with the selected name. <\/p>\n\n\n\n
\/\/ will match <div class=\"fruit-strawberry basket-item\">🍓<\/div>\n$('[class^=\"fruit-\"]').doSomething(...)  \n\n\/\/ won't match <div class=\"basket-item fruit-apple\">🍏<\/div>\n$('[class^=\"fruit-\"]').doSomething(...)  <\/pre>\n\n\n\n
To match a class name starting with “fruit-“<\/em> anywhere in the class string, you will need to use the * selector: <\/p>\n\n\n\n
\/\/ will match <div class=\"vegetable-carrot basket-item\">🥕<\/div>\n$('[class*=\"vegetable-\"]').doSomething(...)\n\n\/\/ will also match <div class=\"basket-item vegetable-potato\">🥔<\/div>\n$('[class*=\"vegetable-\"]').doSomething(...)  <\/pre>\n\n\n\n
<\/div>\n\n\n\n
Here is a full example to play with on CodePen<\/a>: <\/p>\n\n\n\n