jQuery循环遍历DOM元素时如何获取对应input输入框的value值

你可以在现有遍历循环内，通过jQuery的find()方法基于当前遍历到的.well元素（即$(this)）查找后代input元素，直接获取输入值即可，以下是修改后的代码示例：

方案1：分开存储编号和输入值 #

保留原有编号数组，新增数组存储对应输入框内容：

// 存储唯一编号的数组
var mediaIdsArray = [];
// 新增存储对应输入框值的数组
var captionArray = [];

$('#media-grid .well').each(function (index) {  
  // 原有提取唯一编号逻辑
  var id = $(this).attr('id');
  var split_id = id.split("&");
  mediaIdsArray.push(split_id[1]);

  // 新增：获取当前well下的输入框值
  var currentCaption = $(this).find('input[name="caption"]').val();
  captionArray.push(currentCaption);
});

方案2：关联存储编号和输入值（更推荐） #

用对象数组存储，保证编号和对应输入框值强关联，便于后续业务使用：

var mediaDataArray = [];

$('#media-grid .well').each(function (index) {  
  var id = $(this).attr('id');
  var split_id = id.split("&");
  // 获取输入框值
  var currentCaption = $(this).find('input[name="caption"]').val();
  // 组装成对象存入数组
  mediaDataArray.push({
    mediaId: split_id[1],
    caption: currentCaption
  });
});

注意事项 #

• 你现有DOM结构中所有输入框的id均为caption，违反了HTML id全局唯一的规范，建议为每个输入框添加对应唯一编号的后缀，避免其他DOM操作出现异常。
• 你原有代码中id是按&拆分提取唯一编号，但你贴出的DOM示例里well的id格式为media$[唯一编号]，如果实际生产环境的id格式和示例一致，需要把拆分规则调整为id.split("$")才能拿到正确的唯一编号。

内容的提问来源于stack exchange，提问作者Nico van Wijk