如何用jQuery获取所有span文本并写入隐藏输入框？

我来帮你搞定这个需求！你想要把所有带.tag类的span元素的文本内容，以逗号分隔的形式写入#selected-value这个隐藏输入框，下面是具体的实现方案：

核心思路 #

1. 选中所有.tag元素，遍历每个元素提取纯文本内容（注意排除内部的.remove子元素，避免意外内容混入）
2. 把提取到的文本数组用逗号拼接成字符串
3. 将拼接后的字符串赋值给隐藏输入框的value属性

实现代码 #

// 收集所有.tag元素的纯文本内容，去除前后空格
const tagTexts = $('.tag').map(function() {
  // 过滤出当前元素的文本节点，提取内容并去除空格
  return $(this).contents().filter(function() {
    return this.nodeType === Node.TEXT_NODE;
  }).text().trim();
}).get();

// 将拼接后的字符串设置到隐藏输入框
$('#selected-value').val(tagTexts.join(','));

代码解释 #

• $('.tag').map(...)：遍历所有.tag元素，处理每个元素的文本内容
• contents().filter(function(){...})：专门提取当前元素的文本节点，避开内部的.remove子元素（哪怕以后.remove里有内容，也不会影响结果）
• .get()：把jQuery对象转换成普通的字符串数组
• join(',')：将数组元素用逗号连接成单个字符串
• .val(...)：设置隐藏输入框的value值

扩展：动态更新场景 #

如果你的标签是可移除的（比如点击.remove按钮删除标签），可以把逻辑封装成函数，在初始化和标签变化时调用：

function updateSelectedTags() {
  const tagTexts = $('.tag').map(function() {
    return $(this).contents().filter(function() {
      return this.nodeType === Node.TEXT_NODE;
    }).text().trim();
  }).get();
  $('#selected-value').val(tagTexts.join(','));
}

// 页面加载时初始化
$(document).ready(function() {
  updateSelectedTags();
  
  // 点击移除标签后更新隐藏输入框
  $('.remove').on('click', function() {
    $(this).closest('.tag').remove();
    updateSelectedTags();
  });
});

执行这段代码后，你的隐藏输入框就会变成<input type="hidden" id="selected-value" value="lorem ipsum,lorem ipsum">，提交表单时就能正确传递这个逗号分隔的字符串啦。

内容的提问来源于stack exchange，提问作者Yavuz Selim Özmen