jquery - 获取由 Jquery mvc4 中的 foreach 循环迭代的 div 内的值？

Question

正在显示由 Foreach 循环绑定(bind)的模型值。循环正在迭代 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

您必须为所有元素应用 class 而不是 id ，这些元素是您在 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>