CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ShadyBears
ShadyBears

Reputation: 4185

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

Upvotes: 0

Views: 69

Answers (2)

Rayon
Rayon

Reputation: 36609

Answer by Shubham Khatri is perfectly fine, but it could be done in smarter way using DRY approach!

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

Upvotes: 0

Shubham Khatri
Shubham Khatri

Reputation: 281874

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

}

Upvotes: 3

Related Questions