Wie iteriere ich über alle Elemente mit einer bestimmten Klasse und finde einen Eingabetyp darin?

Question

Wie "iteriere" ich zum nächsten .RatedSection input? Ich muss zufällig generierte IDs ziehen und dann für jede Eingabe eine Beschriftung hinzufügen. Wie mache ich das?

Dieser Code wird nicht iteriert, und es fügt nur 95 Mal das Label für das gleiche Element ein.

function addLabel(){ 
    var classElements=document.querySelectorAll('.RatedSection'); 
    var counter; 

    for(counter = 0; counter < classElements.length; counter++){ 
     var id=$('.RatedSection input').attr('id'); 
     var str; 
     var idHash='#'+ id; 


     if($('.RatedSection input').val()==1) 
      str='<label for="'+ id + '">7</label>'; 

     else if($('.RatedSection input').val()==2) 
      str='<label for="'+ id + '">6</label>'; 

     else if($('.RatedSection input').val()==3) 
      str='<label for="'+ id + '">5</label>'; 

     else if($('.RatedSection input').val()==4) 
      str='<label for="'+ id + '">4</label>'; 

     else if($('.RatedSection input').val()==5) 
      str='<label for="'+ id + '">3</label>'; 

     else if($('.RatedSection input').val()==6) 
      str='<label for="'+ id + '">2</label>'; 

     else if($('.RatedSection input').val()==7) 
      str='<label for="'+ id + '">1</label>'; 

     else if($('.RatedSection input').val()==8) 
      str='<label for="'+ id + '">NA</label>'; 

     $('.RatedSection '+idHash).after(str); 

     console.log(str); 
    } 
}; 

Answer 1

Sie müssen Ihren Wert mit einem richtigen Eingang vergleichen. Wenn Sie $('.RatedSelection input').val(); $(this).find('input') verwenden, können Sie sich auf den gleichen Eingang einstellen. Mit $(this).find('input') können Sie auf das aktuelle Element mit der Klasse RatedSelection verweisen und ein Eingabeelement im aktuellen Element finden.

Versuchen Sie es so:

function addLabel(){ 

    $('.RatedSelection').each(function(){ 
     var id= $(this).find('input').attr('id'); 
     var str=''; 
     var idHash = '#' + id; 
     var value = $(this).find('input').val(); 
     if(value==1) 
      str='<label for="'+ id + '">7</label>'; 

     else if(value==2) 
      str='<label for="'+ id + '">6</label>'; 

     else if(value==3) 
      str='<label for="'+ id + '">5</label>'; 

     else if(value==4) 
      str='<label for="'+ id + '">4</label>'; 

     else if(value==5) 
      str='<label for="'+ id + '">3</label>'; 

     else if(value==6) 
      str='<label for="'+ id + '">2</label>'; 

     else if(value==7) 
      str='<label for="'+ id + '">1</label>'; 

     else if(value==8) 
      str='<label for="'+ id + '">NA</label>'; 


     $(this).find(idHash).after(str); 
    }) 

} 

Answer 2

Antwort von Shubham Khatri völlig in Ordnung ist, aber es könnte in intelligenter Weise mit DRY Ansatz durchgeführt werden!

function addLabel() { 
    $('.RatedSelection').each(function() { 
    var $input = $(this).find('input'); 
    var id = $input.attr('id'); 
    var idHash = '#' + id; 
    var value = $input.val(); 
    var max = 8; 
    var label = max - value; 
    var str = '<label for="' + id + '">' + (label || 'NA') + '</label>'; 
    $(this).find(idHash).after(str); 
    }); 
}