jquery每个循环遍历单击元素后的所有元素

时间:2017-05-30 07:00:16

标签: javascript jquery asp.net-mvc

这是将生成的元素的剃刀代码

    @{  k = 0; }; 
    @foreach (var item in Model.Where(q=>q.isOrginal==true))
    {          
        <tr>
            <td>Starting Time</td>
            <td>                    
                @Html.Hidden("[" + i + "].isOrginal", true)
                @Html.DropDownList("[" + i + "].StartingTime", new SelectList(ViewBag.StartingTime, "Value", "Text", item.StartingTime.ToString()), new { @class = "no-select dropdown", data_id= @k,id="starting-true" + @k, data_val="true" })               
            </td>
            <td>Ending Time</td>
            <td>                 
                @Html.DropDownList("[" + i + "].EndingTime", new SelectList(ViewBag.EndingTime, "Value", "Text", item.EndingTime.ToString()), new { @class = "no-select dropdown", data_id = @k,id = "ending-true" + @k, data_val = "true" })                 
            </td>
            <td>Charges</td>
            <td>                
                @Html.TextBox("[" + i + "].Charges", item.Charges, new { @class = "original", data_id = @k, id = "original-false" + @k })
            </td>
        </tr>
        i++;
        k++;
    }

这是到目前为止的jquery代码

$(document).on('change', '.dropdown', function (e)
{         

                $('.dropdown').each(function (i, obj) {

                    var ii = $(obj).attr("data-val");
                    if (ii == "true") {
                        console.log(ii);
                    }

                });  
}); 

假设页面上有8个下拉列表

st     en
st     en
st     en 
st     en

无论哪个下拉我onchanges我想从下一个下拉列表开始循环到最后一个。如果它是最后一个我不想循环通过任何东西。我怎么能做到这一点?

2 个答案:

答案 0 :(得分:0)

尝试以下代码(未根据您的方案进行测试但应该有效)

$(".dropdown").on("change",function(e){ 
  var nextdps = $(this).nextAll(".dropdown");
  if(!nextdps){
   nextdps = [];
  }

  var nextTrs = $(this).parents("tr").nextAll("tr");

  $.each(nextTrs,function(i,elm){
        var trDps= $(elm).find(".dropdown"); 
      if(trDps){
      nextdps.push(trDps);
      }
  });


   $.each(nextdps,function(i,elm){
        var ii = $(elm).attr("data-val");
      if (ii == "true") {
        console.log(ii);
      }  
  })
});

答案 1 :(得分:0)

你可以这样做。我将change事件更改为click,以便您点击任意字词,然后在red中看到以下内容突出显示。

这样,只要设置了ID,就可以在代码中的任何位置添加下拉列表。

&#13;
&#13;
var id;

$(document).on('click', '.dropdown', function(e)
{ 
  id = $(this).attr('id').split('dropdown').pop();
  id = parseInt( id );
  $('.dropdown').removeClass('red');
  $('.dropdown').each( check );
});


function check( index ) 
{
  if ( id == $('.dropdown').length -1 ) { return }
  if ( index <= id ) { return }
  $('.dropdown').get(index).classList.add('red');
  // Do whatever you want here with `index`
}
&#13;
.red {
  color: red;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown" id="dropdown0">Zero</div>
<div class="dropdown" id="dropdown1">One</div>
<div class="dropdown" id="dropdown2">Two</div>
<div class="dropdown" id="dropdown3">Three</div>
<div class="dropdown" id="dropdown4">Four</div>
&#13;
&#13;
&#13;