Question

我正在尝试使用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>

这是我的jQuery代码：

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

但是我得到了错误：

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

如何选择此元素？

顺便说一句，我正在使用chrome puppeteer从某些网站上抓取数据……我不拥有该网站，也无法更改班级名称

Answer 1

您可以使用两个反斜杠转义花括号：

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

As per the documentation：

使用任何元字符（例如！“＃$％＆'（）* +，。/ :; <=>？@ [] ^`{|}〜）作为a的原义部分名称，必须使用两个反斜杠将其转义：\\

因此，以您的示例为例：

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

小提琴示例：https://jsfiddle.net/83tcg7fb/

Answer 2

尽管{和}是类的无效字符，但考虑到您无法更改HTML，您可以使用attribute selector（前缀为^=）

$('#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

您可以使用$.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

要获得预期结果，请使用包含选择器（*）

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

选择具有class =“ {c}”

4 个答案: