如何通过data-id属性与class选择动态创建的jQuery元素？

嘿，我帮你梳理下问题出在哪，以及怎么解决：

第一个坑：.data() 设置的ID没法用属性选择器找 #

你用 $('<div/>').data('id', 'xxx') 时，jQuery并没有把这个data-id写到DOM元素的属性里，而是存在自己的内部缓存中。所以你用[data-id="xxx"]这种基于DOM属性的选择器，自然找不到对应的元素——因为这个属性根本没出现在DOM上！

第二个坑：选择器的语法错误 #

• 你在选择器里直接写了parentContainerId变量名，没有做字符串拼接，导致代码实际在找data-id等于**字符串"parentContainerId"**的元素，而不是你传入的变量值。
• 用[class="myclass_2"]这种精确匹配class的方式太死板，如果元素后续加了其他class（比如myclass_2 active），这个选择器直接失效，换成.myclass_2类选择器才是正确的姿势。

给你三个可行的解决方案，按需选： #

方案1：改用attr()设置data-id（推荐，适合用属性选择器的场景）

如果就是想用属性选择器查找，那创建元素时别用.data()，改用.attr()直接把data-id写到DOM属性上：

// 创建元素时修改成这样
$('<div/>').attr('data-id', 'parentContainer').addClass('myclass_2').appendTo(parent);

然后修正你的查找函数：

function obtainSpecificDiv (parentContainerId){
  // 正确拼接变量 + 使用类选择器
  var div = $('div[data-id="' + parentContainerId + '"].myclass_2');
  // 可以打印看看有没有找到
  console.log('找到的元素数量：', div.length);
  return div;
}
// 调用示例
obtainSpecificDiv('parentContainer');

方案2：保留.data()，用filter()筛选

如果不想改创建元素的代码，坚持用.data()存ID，那就用filter()方法来筛选符合条件的元素：

function obtainSpecificDiv (parentContainerId){
  // 先选中所有.myclass_2的div，再过滤出data-id匹配的
  var div = $('div.myclass_2').filter(function() {
    return $(this).data('id') === parentContainerId;
  });
  console.log('找到的元素数量：', div.length);
  return div;
}

方案3：缩小查找范围（性能优化）

你的元素都是放在指定父容器里的，没必要全局查找，缩小范围能更快找到元素：

// 基于方案1的优化版
function obtainSpecificDiv (parentContainerId){
  // 先定位父容器，再在里面找目标元素
  var parent = $('#' + parentContainerId);
  var div = parent.find('div[data-id="' + parentContainerId + '"].myclass_2');
  console.log('找到的元素数量：', div.length);
  return div;
}

完整的可运行示例代码 #

<html>
<div id="parentContainer"></div>
<div id="otherParentContainer"></div>
</html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var parent = $('#parentContainer');
var otherParent = $('#otherParentContainer');

// 改用attr()设置data-id属性
$('<div/>').attr('data-id', 'parentContainer').addClass('myclass_1').appendTo(parent);
$('<div/>').attr('data-id', 'parentContainer').addClass('myclass_2').appendTo(parent);
$('<div/>').attr('data-id', 'parentContainer').addClass('myclass_3').appendTo(parent);
$('<div/>').attr('data-id', 'otherParentContainer').addClass('myclass_1').appendTo(otherParent);
$('<div/>').attr('data-id', 'otherParentContainer').addClass('myclass_2').appendTo(otherParent);

function obtainSpecificDiv (parentContainerId){
  var div = $('div[data-id="' + parentContainerId + '"].myclass_2');
  console.log('针对' + parentContainerId + '找到的元素：', div);
  return div;
}

// 测试调用
obtainSpecificDiv('parentContainer');
obtainSpecificDiv('otherParentContainer');
</script>

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