如何在JavaScript中获取foreach循环生成的div的value值

核心问题分析 #

1. div不是表单控件：$.val()方法仅针对<input>、<select>这类表单元素，普通<div>的自定义属性不能用这个方法获取，会返回null。
2. 重复ID问题：循环生成的所有div都用了id="myDiv"，这违反HTML规范（ID必须唯一），可能导致后续操作出现意外问题。
3. 遍历逻辑错误：$.each回调里再次用$(".chassi-importado")选择所有元素，每次都会取第一个div的属性值，而不是当前遍历的元素。

步骤1：修正Razor代码（可选但推荐） #

把自定义的value属性换成符合HTML规范的data-*属性，同时确保ID唯一（或去掉不必要的ID）：

@model Recall

@foreach (var veiculo in Model)
{
    <div data-vin="@veiculo.Veiculo.Vin" class="chassi-importado" id="myDiv-@veiculo.Veiculo.Vin">
        @veiculo.Veiculo.Vin
        <i name="icon-remover-um-chassi" class="bx bx-x-circle"></i>
    </div>
}

步骤2：修正JavaScript代码 #

情况1：保留原value属性

用$(this).attr('value')获取当前div的自定义属性值：

let veiculos = [];

$.each($('.chassi-importado'), function () {
    veiculos.push({ vin: $(this).attr('value') });
});

情况2：使用推荐的data-vin属性

用$(this).data('vin')获取data属性值，更符合HTML标准：

let veiculos = [];

$.each($('.chassi-importado'), function () {
    veiculos.push({ vin: $(this).data('vin') });
});

关键说明 #

• 遍历过程中用$(this)指代当前正在处理的div，确保每次获取的是当前元素的属性值，而非整个类的第一个元素。
• 尽量避免给非表单元素添加value这类原生属性，使用data-*属性是更规范的自定义属性写法。

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