我如何选择具有特殊大括号的属性的元素

问题描述

我有一个 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 修复

解决方法

您可以尝试如下：

foreach ($item as $k=>$v)

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

.active {
  color: red
}

您需要 [] 来表示 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>

引号的替代是 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>

javascript jquery