Jquery遍历相似DIV获取选中项ID生成逗号分隔列表问题咨询

• 利用jQuery的closest()方法，从传入的parent（即单选框所属的label元素）向上查找最近的带data-tag-container属性的父容器，即可精准定位当前点击项所属的分组，不会混淆两个DIV
• 对定位到的单独容器使用find()方法检索其内部所有后代元素，仅遍历该容器内的选中输入框，生成CSV列表
• 根据容器的唯一标识（比如ID后缀）关联对应文本框，实现两个分组的结果独立存储

你使用的children('input')方法仅会检索元素的直接子节点，而你的input嵌套在div.rb_UnSelectedItem和label两层子元素内部，自然无法匹配到元素，替换为find('input')即可检索所有后代层级的input元素。

仅需要修改selectTag函数的逻辑即可，无需调整现有HTML结构和调用逻辑：

function selectTag(parent, value, text) {
  // 定位当前点击项所属的独立分组容器
  const $currentGroup = $(parent).closest('[data-tag-container]');
  // 仅遍历当前容器内的选中项，生成ID的逗号分隔列表
  const checkedIdCsv = $currentGroup.find('input:checked')
    .map(function () {
      return this.id;
      // 如需生成value的CSV，替换上行为 return this.value;
    })
    .get()
    .join(',');

  // 关联对应结果文本框，这里用容器ID后缀做匹配，简单直接
  const groupSuffix = $currentGroup.attr('id').replace('divTagGroup', '');
  // 对应文本框ID规则为 tagResult_分组后缀，比如第一个分组对应ID为tagResult_14
  $(`#tagResult_${groupSuffix}`).val(checkedIdCsv);
}

仅需要在页面新增两个对应ID的文本框用于存储结果即可：

<!-- 对应第一个分组（divTagGroup14）的结果存储框 -->
<input type="text" id="tagResult_14" readonly>
<!-- 对应第二个分组（divTagGroup15）的结果存储框 -->
<input type="text" id="tagResult_15" readonly>

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