juice juice - 2 months ago 7
HTML Question

How do I iterate over all elements having a particular class and find an input type in it?

How do I "iterate" to the next

.RatedSection input
? I have to pull randomly generated IDs and then add a label for each input. How do I do this?

This code is not iterating,and it's just inserting the label for the same element 95 times.

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

You need to compare your value to a proper input. You are everyitme cojmparing to the same input when you use $('.RatedSelection input').val(); Using $(this).find('input') will enable you to refere to the current element your iterating over with a class RatedSelection and find an input element inside the current element.

Try it this way:

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);
    })

}