如何使用jquery访问MVC视图中由foreach循环创建的div的子元素 [英] How to access sub elements of div created by foreach loop in MVC view using jquery

问题描述

以下是我的观点：

< div class =row> 
 @foreach（Model.Product中的var项目）
 {
< div class =col-lg-3 col-md-6id =@ item.ProductIdname = 分区 > 
 
< div class =panel panel-greenstyle =border-radius：25px; border：1px solid＃47d7ac;> 
< div class =panel-heading> 
< div class =row> 
< div class =col-xs-12> 
< h4 class =text-centerid =ProductName> @ item.Name< / h4> 
< div class =img-responsive> 
< img src =@ item.ImageUrlclass =img-responsive img-thumbnailid =@ item.ImageUrl/> 
< / div> 
 
< / div> 
< / div> 
< / div> 
< div class =panel-footerstyle =background-color：transparent> 
< div class =row> 
< p id =descriptionstyle =text-align：center> @ item.Description< / p> 
< / div> 
< div class =row> 
< div class =col-md-6> 
< h4 class =pull-left>₹ < span id =Costclass =Cost> @ item.Cost< / span>< / h4> 
< / div> 
< div class =col-md-6> 
< input type =submitclass =btn btn-primary regbtn center-blockid =buystyle =width：autovalue =Buy/> 
< / div> 
< / div> 
< div class =clearfix>< / div> 
< / div> 
 
 
< / div> 
 
< / div> 
} 
< / div> 

点击每次购买我想要检索该div内容和通过ajax将这些传递到下一页



我尝试过：

< script> 
 $（document）.ready（function（）{
 var div = $（'[name = div]'）。attr（'id'）; 
 
 $（ ＃+ div）.find（$（＃buy））。click（function（）{
 var name = $（＃+ div）.find（$（＃ProductName+ div） ））。text（）; 
 var desc = $（＃description+ div）.text（）; 
 var cost = $（＃Cost+ div）.text（）; 
 var img = $（＃img+ div）.attr（'src'）; 
 alert（name）; 
 $ .ajax（{
 url：'@ Url .Action（GetOrder，Home）'，
 data：{Name：name，Desc：desc，Cost：cost，ImgUrl：img}，
 type ：'POST'，//添加
成功：函数（数据）{
 window.location.href = data; 
} 
}）; 
 
}）; 
}）; 
< / script> 

解决方案

（document）.ready（function（）{
var div =

（'[name = div]'）。attr（'id'）;

（＃+ div）.find（

Here is my view :

<div class="row">
@foreach (var item in Model.Product)
{
            <div class="col-lg-3 col-md-6" id="@item.ProductId" name="div">
                 
                <div class="panel panel-green" style=" border-radius: 25px; border: 1px solid #47d7ac;">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-xs-12 ">
                                <h4 class="text-center" id="ProductName">@item.Name</h4>
                                <div class="img-responsive">
                                    <img src="@item.ImageUrl" class="img-responsive img-thumbnail" id="@item.ImageUrl" />
                                </div>
                               
                            </div>
                        </div>
                    </div>
                    <div class="panel-footer" style="background-color:transparent">
                        <div class="row">
                            <p id="description" style="text-align:center">@item.Description</p>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <h4 class="pull-left">₹ <span id="Cost" class="Cost">@item.Cost</span></h4>
                            </div>
                            <div class="col-md-6">
                                <input type="submit" class="btn btn-primary regbtn center-block" id="buy" style="width:auto" value="Buy" />
                            </div>
                           </div>
                      <div class="clearfix"></div>
                        </div>
                   

                </div>
              
            </div>
}
</div>

on click of each buy i want to retrieve that div content and pass those to next page through ajax

What I have tried:

<script>
    $(document).ready(function () {
        var div = $('[name=div]').attr('id');
        
        $("#" + div).find($("#buy")).click(function () {
            var name = $("#" + div).find( $("#ProductName"+div)).text();
            var desc = $("#description" + div).text();
            var cost = $("#Cost"+div).text();
            var img = $("#img"+div).attr('src');
            alert(name);
            $.ajax({
                url: '@Url.Action("GetOrder", "Home")',
                data: { "Name": name,"Desc":desc,"Cost":cost,"ImgUrl":img},
                type: 'POST', // add
                success: function (data) {
                    window.location.href = data;
                    }
            });
           
        });
    });
</script>

解决方案

(document).ready(function () { var div =

('[name=div]').attr('id');

("#" + div).find(

这篇关于如何使用jquery访问MVC视图中由foreach循环创建的div的子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！