jQueryのクリックされた要素の後にすべての素子を介して各ループ

Question

これは、これはこれまで

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

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

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

       }); 
}); 

があると仮定jqueryのコードである

@{ 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++; 
    } 

生成される要素のカミソリコードでありますページで8ドロップダウンが発生しました

st  en 
st  en 
st  en 
st  en 

いずれかのドロップダウンi onchanges次のdroからループを開始したい最後までpdown。最後の場合は何もループしたくありません。どうすればこれを達成できますか？

Answer 1

は、あなたがこの方法を行うことができます（あなたのシナリオごとのように試験したが動作するはずではない）コードの下に

$(".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); 
     } 
    }) 
}); 

Answer 2

を試してみてください。 changeイベントをclickに変更しました。その結果、任意の単語をクリックして、redにハイライト表示されているものを見ることができます。

この方法では、IDが設定されている限り、コードのどこにでもドロップダウンを設定できます。

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` 
 
}

.red { 
 
    color: red; 
 
}

<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>