jQuery无法获取Razor页面中对应基金名称值的问题求助

问题原因 #

你用$(this).prev().prev().val()获取fundName失败，核心原因有两个：

1. DOM层级关系错误：input.election和label不在同一层级——label在.col-sm-9容器中，input在.col-sm-3容器中，二者是父容器的兄弟元素，并非input的直接同级，prev()方法只能查找当前元素的同级前置元素，所以无法定位到label。
2. 获取方式错误：label的内容是文本节点，不是value属性，用val()方法无法提取文本，需用text()或html()。

解决方案 #

方案1：通过父级容器定位label

修改jQuery中fundName的获取逻辑，先找到当前input所在的.row父容器，再从中定位label并提取文本：

$('.election').each(function () {
    percent = parseInt($(this).val());
    if (percent > 0) {
        fund = $(this).next().val();
        // 修正fundName获取方式
        fundName = $(this).closest('.row').find('label').text().trim();
        console.log("fundName = " + fundName);
        data = {
            'fund': fund,
            'fundName': fundName,
            'percent': percent
        };
        sendData.push(data);
    }
});

方案2：用data属性直接绑定（更简洁高效）

在Razor循环中，给input.election添加data-fundname属性，将fundName直接绑定到input元素上：

@foreach (var localRecord in Model.electionData)
{
     <div class="row">
          <label for="@localRecord.ElementID" class="col-sm-9 col-form-label text-left">@localRecord.FundName</label>
          <div class="col-sm-3">
               <!-- 添加data-fundname属性 -->
               <input type="number" class="form-control election" id="@localRecord.ElementID" min="@localRecord.MinPct" max="@localRecord.MaxPct" value="0" data-fundname="@localRecord.FundName">
               <input type="number" hidden value="@localRecord.HostFID" />
          </div>
     </div>
}

然后在jQuery中直接通过data()方法获取：

$('.election').each(function () {
    percent = parseInt($(this).val());
    if (percent > 0) {
        fund = $(this).next().val();
        // 直接从data属性提取
        fundName = $(this).data('fundname');
        console.log("fundName = " + fundName);
        data = {
            'fund': fund,
            'fundName': fundName,
            'percent': percent
        };
        sendData.push(data);
    }
});

两种方案均可解决问题，方案2无需遍历多层DOM，代码更简洁且效率更高，优先推荐使用。

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