如何在div循环时使用Jquery find()函数获取值？

Question

我正在通过 Jquery find() 函数获取输入字段的值。当涉及到如下图所示的循环时，它运行良好只有第一个值出现。

我需要的是在按下交付按钮时我必须获取文本框内的值(Trackid)。这是我试过的

Jquery

  $('.mybtn').click(function () {

            var sa = $(this).closest(".main");
            var tid = sa.find(".tid").val();
            var mid = $(this).data("mid")
          alert("trackid:"+tid+"\nmid:"+mid);
});

View

  @foreach (var group in Model.GroupBy(o=>o.orderid))  
     {

<div class="card text-center main" style="margin-bottom:24px;margin-top:24px">
  <div class="card-header ">
<button type="button" class="btn btn-success float-left orderid" data-oid="@group.Key">@group.Key</button>
  </div>
   @foreach(var i in group)
        {

  <div class="card-body">
        <div class="row">
            <div class="col-sm">
                <h6>Customer:@i.name</h6>
            <h6>Address:
                @i.address</h6>
            <h6>Contact.No:@i.mobile</h6>
                <h6>No.Of Items: @i.count</h6>
@*      <img src="@i.img" class="img-thumbnail" width="100" height="150"/>*@
                </div>
            <div class="col-sm">
                <h4>Product Name:@i.mname</h4>
                <h5><i class="fa fa-inr" aria-hidden="true"></i>@i.mrate</h5>


            </div>
            <div class="col-sm">
                @if (i.status == 0)
            {
           <h5>TrackId:</h5>
                <div><input type="text" placeholder="Tracking Number" id="tid" class="tid" /></div>
                      @*<div><button type="button" data-mid="@i.mid" class="btn btn-primary mybtn">Dispatch<i class="fa fa-bolt"></i></button></div>*@


            }
             @if (i.status == 1)
             {
            <div style="color:#ADFF2F">Dispatched</div>
                 <div>@i.trackid</div>
                    <div><i class="fa fa-check-square-o" style="color:green;font-size:24px"></i></div>
             }
            </div>
            <div class="col-sm">
                @if(i.ddate==DateTime.MinValue)
                {
                <h6>Delivery Status:Pending</h6>
                }
                else
                {
                <h6>Delivered on:@i.ddate</h6>
                }
            </div>
            </div>

        <a href="#" id="mybtn"  data-mid="@i.mid" class="btn btn-primary mybtn">Deliver</a>
  </div>

  <div class="card-footer text-muted">
    Ordered On:
  </div>
     }
     </div>
     }
        </div>
}

如下图所示。我需要将文本框值放在按钮之前

Answer 1

您可以通过添加父 div 来获取值：

$('.mybtn').click(function () {
        var tid = $(this).parent().parent().find(".tid").val();
        var tid2 = $(this).parent().parent().find(".tid").eq(1).val();
        $(this).parent().html($(this).parent().html()+" "+tid2);
        var mid = $(this).data("mid")
      alert("trackid:"+tid+"\nmid:"+mid+"\ntid2:"+tid2);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div><input type="text" placeholder="Tracking Number" id="tid" class="tid" /></div>
<div><input type="text" placeholder="Tracking Number" id="tid" class="tid" /></div>
                  @*<div><button type="button" data-mid="@i.mid" class="btn btn-primary mybtn">Dispatch<i class="fa fa-bolt"></i></button></div>*@
</div>
<div>
<div><input type="text" placeholder="Tracking Number" id="tid" class="tid" /></div>
                  @*<div><button type="button" data-mid="@i.mid" class="btn btn-primary mybtn">Dispatch<i class="fa fa-bolt"></i></button></div>*@
</div>

Answer 2

这就是我解决这个问题的方法 Question.I 只是将按钮放在下面 div.like 的顶部之一

 <div class="col-sm">
                @if(i.ddate==DateTime.MinValue)
                {
                <h6>Delivery Status:Pending</h6>
                    <a href="#" id="mybtn"  data-mid="@i.mid" class="btn btn-primary mybtn">Deliver</a>
                }

Jquery

 $('.mybtn').click(function () {
        var prev = $(this).parent().prev().find('input[type=text]');
        var val = $(prev).val();
        alert(val);
    })

如何在div循环时使用Jquery find()函数获取值？

How to use Jquery find() function to get value when div is looping?

html

jquery

find

asp.net-mvc-4