sélectionnez l'élément avec class="{c}"

Question

J'essaie de sélectionner l'élément avec 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>

Voici mon code jQuery :

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

mais je reçois une erreur :

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

comment puis-je sélectionner cet élément ?

En fait, je récupère les données d'un site web à l'aide de chrome puppeteer. Je ne possède pas le site web et je ne peux pas changer le nom de la classe.

Answer 1

Vous pouvez échapper aux accolades en utilisant deux barres obliques inverses :

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

Selon la documentation :

Pour utiliser l'un des métacaractères (comme !"#$%&'()*+,./:;<=>?@[]^`{|}~) comme partie littérale d'un nom, il doit être échappé par deux barres obliques inverses : \\

Donc, en utilisant votre exemple :

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

Exemple de violon : https://jsfiddle.net/83tcg7fb/

Answer 2

Malgré { y } étant des caractères non valides pour les classes, vous pouvez utiliser l'option Sélecteur d'attributs (en particulier ^= pour le préfixe) étant donné que vous ne pouvez pas modifier le 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>

Answer 3

Vous pouvez utiliser $.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>

Answer 4

Pour obtenir le résultat escompté, utilisez le sélecteur de contenu (*)

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