jQuery 數據屬性數組選擇器

Question

有這個 html 代碼：

<div class="wcpa_form_outer" data-attrrelated="[&quot;wcpa-select-1658734650073&quot;]">

為此，我正在嘗試 append html。 我嘗試了各種方法，但都沒有奏效。

jQuery('.wcpa_form_outer[data-attrrelated="["wcpa-select-1658734650073"]"]').append('some html here');

或者

jQuery('.wcpa_form_outer[data-attrrelated="[wcpa-select-1658734650073]"]').append('some html here');

或者

jQuery('.wcpa_form_outer').data('attrrelated').append('some html here');

任何線索？

Answer 1

" 和/或屬性值中的[]可能是問題刪除它，或嘗試使用屬性值的一部分（最相關的部分？）：

 $('[data-attrrelated*="1658734650073"]').append('some html here;'). $('[data-attrrelated*="wcpa-select-165873465007"');append('<br>some html here too!');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wcpa_form_outer" data-attrrelated="[&quot;wcpa-select-1658734650073&quot;]"></div>

Answer 2

問題是您正在使用 HTML 實體" 在你的屬性中。 這被翻譯成字面引述。 JQuery 不進行實體翻譯，因此它實際上是在尋找字符串["wcpa-select-1658734650073"]和符號，而不是["wcpa-select-1658734650073"] ，這是您屬性中的實際值。

您可以使用以下方法之一解決此問題（在將實體轉換為代碼中的引號之后）。

1. 為您的屬性（ attr*=value ）使用 CSS “包含”選擇器（由 KooiInc 的回答證明）或
2. 使用一個字符串模板，它允許您在字符串中嵌入兩種類型的引號並獲得完全匹配 ( attr=value )，如下所示
3. 使用字符串連接構造包含引號的字符串值（例如'["' + value + '"]' ）
4. 使用此答案中的decodeEntities function 在嘗試查找之前轉換您的屬性值（未經測試，已有 10 年歷史）

 jQuery(`.wcpa_form_outer[data-attrrelated='["wcpa-select-1658734650073"]']`).append('foo')

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wcpa_form_outer" data-attrrelated="[&quot;wcpa-select-1658734650073&quot;]">append here: </div>