select element with class="{c}"

Question

I'm trying to select the element with class="{c}"

<div id="main">
    <div class="{c}">  some data </div>
    <div class="{c}">  some data </div>
    <div class="{c}">  some data </div>
    <div class="{c}">  some data </div>
</div>

here is my jQuery code :

$('#main').find('.{c}' ).each(function()
{
    console.log($(this).html());
})

but i get error:

Uncaught Error: Syntax error, unrecognized expression: .{c}

how can i select this element ?

btw , I'm scraping data from some website using chrome puppeteer ... i don't own the website and can't change the class name

`{` and `}` are not valid characters for classes - can you change your html? — chazsolo, May 06 '19 at 15:00
Possible duplicate of [Which characters are valid in CSS class names/selectors?](https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors) — Derek Pollard, May 06 '19 at 15:02

Brett Gregson · Accepted Answer · 2019-05-07T06:47:55.507

6

You can escape the curly braces using two backslashes:

$(".\\{c\\}")

As per the documentation:

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \\

So using your example:

$('#main').find('.\\{c\\}' ).each(function()
{
    console.log($(this).html());
})

Example fiddle: https://jsfiddle.net/83tcg7fb/

edited May 07 '19 at 06:47

answered May 06 '19 at 15:06

Brett Gregson

5,652
3
39
57

1

thanx , i actually thought of that but tried one backslash – hretic May 06 '19 at 15:10

score 2 · Answer 2 · answered May 06 '19 at 15:05

Despite { and } being invalid characters for classes, you can use the attribute selector (specifically ^= for prefix) considering you can't change the HTML

$('#main').find('[class^="{c"]').each(function() {
  console.log($(this).html());
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
  <div class="{c}"> some data </div>
  <div class="{c}"> some data </div>
  <div class="{c}"> some data </div>
  <div class="{c}"> some data </div>
</div>

score 1 · Answer 3 · answered May 06 '19 at 15:04

You can use $.escapeSelector( "{c}" )

$('#main').find( "." + $.escapeSelector( "{c}" ) ).each(function()
{
    console.log($(this).html());
})

$('#main').find( "." + $.escapeSelector( "{c}" ) ).each(function()
{
    console.log($(this).html());
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
    <div class="{c}">  some data </div>
    <div class="{c}">  some data </div>
    <div class="{c}">  some data </div>
    <div class="{c}">  some data </div>
</div>

score 1 · Answer 4 · answered May 06 '19 at 15:12

To achieve expected result, use contains selector (*)

https://api.jquery.com/attribute-contains-selector/

$('#main').children('div[class*=c]').each(function(){
    console.log($(this).html());
})

  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

 <div id="main">
    <div class="{c}">  some data </div>
    <div class="{c}">  some data </div>
    <div class="{c}">  some data </div>
    <div class="{c}">  some data </div>
</div>

codepen - https://codepen.io/nagasai/pen/arzBYm

select element with class="{c}"

4 Answers4