Получить значения внутри div, который повторяется в цикле foreach в Jquery mvc4?

Question

Я отображаю значения, которые привязаны к модели с помощью цикла Foreach. И цикл итерирует Div вместо строки таблицы. Я хочу получить значения внутри функции jquery. Я не знаю, как получить, я много пробовал. вот мой код: -

     @foreach(var p in Model.Cart)
                                   {

                                    a++;

         <div class="container">
            <div class="container-fluid" >
        <div class="row">
            <div class="col-12 mt-3">
                <div class="card">
                    <div class="card-horizontal" style="display:flex;flex: 1 1 auto;">
                        <div class="img-square-wrapper">
                            <img class="img-thumbnail" src="@Url.Content(p.img)" alt="Card image cap" style="height:150px;width:150px">
<input type="hidden" id="mid">@p.mid</input>
                            <h1 style="display:none">@p.mid</h1>
                            <div class="invert" id="count">
                                        <div class="quantity">
                                            <div class="quantity-select">
                                                <div class="entry value-minus" id="minus">&nbsp;</div>
                                                <div class="entry value" id="counter">@p.mcount</div>
                                                <div class="entry value-plus active" id="plus">&nbsp;</div>
                                            </div>
                                        </div>
                                    </div>
                        </div>

                        <div class="card-body">
                            <h4 class="card-title">@p.mname</h4>
                            <h5 class="card-text" id="prize"><i class="fa fa-inr" aria-hidden="true" style="font-size:20px"></i> @p.totalprize</h5>
                            <h1 style="display:none" id="pri" data-val="@p.mprize">@p.mprize</h1>
                          <a  id="close1" onclick="return onclickFunction(@p.mid)"> <i class="fa fa-times" aria-hidden="true" style="font-size:24px;color:red"></i> Remove</a>
                        </div>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">Deliver Within a Weak</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

         </div>
                    }

Jquery

$('.entry.value-plus.active').click(function () {


        var row = $(this).closest(".card");
        var mid = $(row).children('#mid').val();
        var quantity = parseInt($(row).children('#count').text()) + 1; //parseInt($(row).children('#counter').text(),10);
        var a = parseInt($(row).children('#pri').text());
        var upprize = quantity * a;

        alert("mid="+mid+"\n"+"quantity="+quantity+"\n"+"prize="+upprize);
    });

Answer 1

Вы должны применить класс вместо идентификатора для всех этих элементов, значения которых вы хотите в js-коде, затем вам нужно получить значение, используя метод parent(). Я создал два div с различным типом значения, проверьте его.

 $('.entry.value-plus.active').click(function () {

        var mid = $(this).parent().parent().parent().parent().find('.mid').text();
        var quantity = parseInt($(this).parent().find('.counter').text());
        var a = $(this).parent().parent().parent().parent().parent().find('.card-body').children('.pri').text();
        var upprize = quantity * a;

        alert("mid=" + mid + "\n" + "quantity=" + quantity + "\n" + "prize=" + upprize);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container entry value-plus active">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12 mt-3">
                <div class="card">
                    <div class="card-horizontal" style="display:flex;flex: 1 1 auto;">
                        <div class="img-square-wrapper">
                            <img class="img-thumbnail" src="test" alt="Card image cap" style="height:150px;width:150px">
                            <h1 style="display:none" class="mid">MID value1</h1>
                            <div class="invert" id="count">
                                <div class="quantity">
                                    <div class="quantity-select">
                                        <div class="entry value-minus" id="minus">&nbsp;</div>
                                        <div class="entry value counter" id="counter">15</div>
                                        <div class="entry value-plus active" id="plus">&nbsp;click me</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-body">
                            <h4 class="card-title">MNAME</h4>
                            <h5 class="card-text" id="prize"><i class="fa fa-inr" aria-hidden="true" style="font-size:20px"></i> TOTALPRIZE</h5>
                            <h1 style="display:none" id="pri" class="pri" data-val="mprize">5000</h1>
                            <a id="close1" onclick="return onclickFunction(MID)"> <i class="fa fa-times" aria-hidden="true" style="font-size:24px;color:red"></i> Remove</a>
                        </div>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">Deliver Within a Weak</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-12 mt-3">
                <div class="card">
                    <div class="card-horizontal" style="display:flex;flex: 1 1 auto;">
                        <div class="img-square-wrapper">
                            <img class="img-thumbnail" src="test" alt="Card image cap" style="height:150px;width:150px">
                            <h1 style="display:none" class="mid">MID value2</h1>
                            <div class="invert" id="count">
                                <div class="quantity">
                                    <div class="quantity-select">
                                        <div class="entry value-minus" id="minus">&nbsp;</div>
                                        <div class="entry value counter" id="counter">25</div>
                                        <div class="entry value-plus active" id="plus">&nbsp;click me</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-body">
                            <h4 class="card-title">MNAME</h4>
                            <h5 class="card-text" id="prize"><i class="fa fa-inr" aria-hidden="true" style="font-size:20px"></i> TOTALPRIZE</h5>
                            <h1 style="display:none" id="pri" class="pri" data-val="mprize">10000</h1>
                            <a id="close1" onclick="return onclickFunction(MID)"> <i class="fa fa-times" aria-hidden="true" style="font-size:24px;color:red"></i> Remove</a>
                        </div>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">Deliver Within a Weak</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

Answer 2

Я заметил несколько несоответствий, как указано ниже.

1. Для input необходимо назначить value с attribute, как показано ниже.

<input type="hidden" id="mid" value="@p.mid" />

Для получения значения quantity Я полагаю, вам следует использовать #counter вместо #count, как показано ниже.

var quantity = parseInt($(row).children('#counter').text()) + 1;