如何选择具有特殊大括号的属性的元素[重复]

Posted 2023-03-05

【中文标题】如何选择具有特殊大括号的属性的元素[重复]

【英文标题】：how do i select a element with a attribute having special curly brackets [duplicate]

【发布时间】：2021-06-07 08:42:12

【问题描述】：

我有一个 html 按钮，如下所示。它会有一个属性

<button class="first-button" data-content='8C2E25C4-5E4F-484C-97D0-F42305F30E19'> my content</button>

单击此按钮时，我需要获取该属性并从中制作一个属性选择器，用于具有不同类和相同属性的另一个元素

<button class="second-button" data-content='8C2E25C4-5E4F-484C-97D0-F42305F30E19'> my content</button>

我尝试了 jquery 属性选择器，但没有成功

$('data-content=8C2E25C4-5E4F-484C-97D0-F42305F30E19')

我愿意接受 JS 或 jQuery 修复

【问题讨论】：

为什么重新打开？这是一个非常常见的重复。

@RoryMcCrossan 受骗的是如何选择数据属性，而不是如何选择带有特殊字符的数据属性。我也有一个比我能找到的骗子更新的答案

如果您只是将值括在引号中，则没有特殊字符，这就是欺骗中的解决方案所解释的。 编辑 - 下面@Swati 的回答确实如此。

【参考方案1】：

引号的替代品是jQuery.escapeSelector 或CSS.escape

const data = CSS.escape("8C2E25C4-5E4F-484C-97D0-F42305F30E19")
$(`button[data-content=$data]`).addClass("active")

.active 
  color: red

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="first-button" data-content='8C2E25C4-5E4F-484C-97D0-F42305F30E19'> my content</button>

<button class="second-button" data-content='8C2E25C4-5E4F-484C-97D0-F42305F30E19'> my content</button>

【参考方案2】：

对于attribute selectors，您需要[]，并且在选择器中需要一个通配符运算符，因为该值具有

$('[data-content*=8C2E25C4-5E4F-484C-97D0-F42305F30E19]').css('color','red')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="first-button" data-content='8C2E25C4-5E4F-484C-97D0-F42305F30E19'> my content</button>

【参考方案3】：

您可以尝试如下：

$('button[data-content="8C2E25C4-5E4F-484C-97D0-F42305F30E19"]').addClass("active")

.active 
  color: red

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="first-button" data-content='8C2E25C4-5E4F-484C-97D0-F42305F30E19'> my content</button>

<button class="second-button" data-content='8C2E25C4-5E4F-484C-97D0-F42305F30E19'> my content</button>