如何用jQuery选择含数组格式data属性的元素并追加HTML？

首先明确核心问题：你的选择器写法错误，或对jQuery的.data()方法返回值理解有误，导致无法定位目标元素执行append操作。

先理清目标元素的实际属性值 #

原HTML代码中的data-attrrelated="["wcpa-select-1658734650073"]"，经过浏览器解析后，该属性的实际值为**["wcpa-select-1658734650073"]**（"会被转换为双引号）。

可行的解决方法 #

方法1：修正属性选择器的引号匹配

直接针对解析后的属性值写选择器，用单引号包裹属性值避免冲突：

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

或者保留HTML转义的写法（和原HTML属性一致）：

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

方法2：用.data()+.filter()筛选（推荐）

jQuery的.data()会自动解析JSON格式的data属性，返回数组而非字符串，所以可以通过筛选找到目标元素：

jQuery('.wcpa_form_outer').filter(function() {
  // 解析后data('attrrelated')是数组：["wcpa-select-1658734650073"]
  return $(this).data('attrrelated').includes('wcpa-select-1658734650073');
}).append('some html here');

这种方式无需纠结选择器的引号转义，兼容性和可读性更好。

方法3：简化选择器（如果页面只有一个目标元素）

如果页面中唯一的.wcpa_form_outer就是你要操作的元素，直接用类选择器即可：

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

你之前尝试的错误点 #

• 第一种选择器用了"，这是HTML的双重转义，和浏览器解析后的实际属性值不匹配，无法找到元素。
• 第二种选择器的属性值缺少双引号，和实际的["wcpa-select-1658734650073"]不匹配，定位失败。
• 第三种尝试中，.data('attrrelated')返回的是解析后的数组（不是DOM元素），所以不能直接调用append方法，属于概念误解。

内容的提问来源于stack exchange，提问作者Meni