Razor视图查找从javascript在循环中分配的Id

我有以下资料：

for (int i = 0; i < Model.Questions.Count; i++)
{
    @Html.TextAreaFor(modelItem => Model.Questions[i].AnswerText, new { @class = "form-control multi", rows = "6" })
    <div class="remaining-counter">
        <p><span id="Counter_@i"></span> characters remaining</p>
    </div>
}

---

我不知道如何为显示剩余计数的计数器范围获取适当的id

我不知道它是否正确，但您可以在jquery.simplyCountable.js文件中替换这一行：-

var counter = $(options.counter);

with 

var counter = $(this).next().find('span');

或者您可以简单地执行以下操作：-

$(function () {
        $('.multi').each(function () {
            var id = $(this).next().find('span').attr('id');
            $(this).simplyCountable({
                counter: '#' + id,
                countType: 'characters',
                maxCount: 4000,
                strictMax: false,
                countDirection: 'down',
                thousandSeparator: ',',
            });
        });

    });

---

抱歉，但是我觉得把插件硬连接到选择器是一个糟糕的解决方案

两个选择。。。 选项1-无需更改插件

JSFiddle：

您可以迭代

.multi

元素，并使用匹配的span id将它们单独连接起来，如下所示：

$(function () {
    $('.multi').each(function () {
        var counter = $(this);
        counter.simplyCountable({
            counter: '#' + counter.next().find("span").attr('id'),
            countType: 'characters',
            maxCount: 4000,
            strictMax: false,
            countDirection: 'down',
            thousandSeparator: ',',
        });
    });
});

选项2-改进插件

更好的解决方案是改进插件，以便使用

计数器

选项查找与插入的元素相关的元素。这将需要一个公共祖先元素，以便可以定位

textarea

和计数器

JSFiddle：

HTML更改（添加了父div）：

新插件初始化代码如下所示：

return $(this).each(function () {
        var $element = $(this);
        var countable = $element.find(options.text);
        var counter = $element.find(options.counter);

---

用自定义选择器攻击插件是一个非常糟糕的主意。将

simplyCountable

分别附加到每个元素或改进插件都是更好的选择。我已经提供了这两方面的例子。注意：制作HTML的示例中有重复的span

id

sinvalid@TrueBlueAussie示例中的duplicate

ids

只是在real code

ids

中为示例复制粘贴div，生成动态for循环，正如您在问题中所看到的，这只是一个纠正JSFIDLE的建议。请随意忽略它。

$(function () {
    $('.container').simplyCountable({
        counter: 'span',
        countType: 'characters',
        maxCount: 4000,
        strictMax: false,
        countDirection: 'down',
        thousandSeparator: ',',
    });
});

<div class="container">
    <textarea class="multi"></textarea>
    <div class="remaining-counter">
        <p><span class="safe">3,979</span> characters remaining</p>
    </div>
</div>

$.fn.simplyCountable = function (options) {
    options = $.extend({
        text: 'textarea',
        counter: '.counter',

return $(this).each(function () {
        var $element = $(this);
        var countable = $element.find(options.text);
        var counter = $element.find(options.counter);