jQuery Uncaught Syntax 错误，无法识别的表达式：+答案

【问题标题】：jQuery Uncaught Syntax error, unrecognized expression: +jQuery Uncaught Syntax 错误，无法识别的表达式：+
【发布时间】：2019-07-03 17:43:22
【问题描述】：

当"+" 符号作为字符串的一部分传递时，我有一段代码会导致jQuery 出现一些问题。

这是一个例子：

var ssArr = ["First/","Second /","Third+"];
if(ssArr !== null) {
  $.each(ssArr, function(ind, val){
    if(val !== ''){
      val = val.replace(/ /g, '').replace('/', '');
      console.log(val);
      $('.tstNavLi' + val).addClass('active');
    }
  });
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul li {
  color: coral;
  text-align: center;
  font-family: "Arial", sans-serif;
  font-size: 30px;
  border: 3px solid coral;
  margin: 20px 0
}

ul li.active {
  color: blue;
  border: 3px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
  <ul>
    <li class="tstNavLiFirst">First</li>
    <li class="tstNavLiSecond">Second</li>
    <li class="tstNavLiThird+">Third+</li>
  </ul>
  
</body>
</html>

我怎样才能让它工作？这是 cms/shopping 系统的一部分，"+" 符号的使用非常频繁，因此我无法将 "+" 更改为其他符号。

谢谢大家。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

首先考虑的是那些真的是classes 还是应该是data-labels 之类的东西？

因为如果它们实际上不是 CSS 类，您可以将它们设置为 data-labels，然后使用 "[data-label='"+val+"']" 选择它们（如果' 出现在标签中，可以选择转义...）

否则，您将需要正确转义输入字符串，这可能会很麻烦。

【讨论】：

它们是真正的类，用于其他功能，包括 css 样式。您能否对此进行扩展-否则，您将需要正确转义输入字符串，这可能会很麻烦-谢谢。造成这个问题的“+”符号是怎么回事？
+ 符号在类中不是有效字符，因为它在应用 css 时有特定用途。 Here's相关文档。
@Rich Aaaa... 这很有道理。
一般来说，你应该尽量保持你的类只有字母数字名称。一些符号字符是有效的，但另一些则要求您对其进行转义（在符号前添加 \）。
另外值得注意的是，没有什么可以阻止您在 CSS 中使用 [data-label='tstNavLiThird+']。