wwwredback wwwredback - 2 months ago 6
Javascript Question

Find an class a number of radio buttons in a div section then repeat separately for other div blocks

I am trying to find a DIV with a class of 'radior' and then find all the span elements I have inside of that DIV with a class of 'newone' and depending on how many 'newone' instances there are it will add a certain class to it. This is all fine but I want the function to reset after completing and find the next class of 'radior' and start again.

Currently what I have is adding up all of the instances of 'newone' and not per div.radior block.

<div class="form-group radior">



Option 1a


<label for="Option 1b ">
<input type="radio"> <span class="newone"><div class="moveme">Option 1b</div></span>
</label>






Option 2a


<label for="Option 2b ">
<input type="radio"> <span class="newone"><div class="moveme">Option 2b</div></span>
</label>



Option 2c



Here is a fiddle to show you what I already have:

http://jsfiddle.net/wwwredback/fsrLwzpp/3/

Any help is most welcomed. Thanks

Answer

Use jQuery's each() and find() methods?

You can access elements (.radior DIVs in your case) enumerated by $(...).each() via this in callback closure, and use .find() method to pick .newone elements, relative to that specific .radior DIV (currently you applying css classes to all .newone elements, not only under current enumerated DIV):

$('.radior').each(function() {
  var ones = $(this).find('.newone'); // newone's of current .radior
  var count = ones.length;

  switch (count) {
      case 1:
      case 2:
      case 3:
        var sub = ['full', 'half', 'third'];
        // important: 'ones.addClass(...)', not '$('.newone').addClass(...)'
    	ones.addClass( sub[count - 1] + " col-xs-12 col-md-" + (12 / count));
        break;
      
      case 4:
        ones.addClass( "quarter col-xs-12" );
        break;

      case 4:
        ones.addClass( "another col-xs-12" );
        break;
  }
});
.full {color:red;}

.half {color:blue;}

.third {color:green;}

.quarter {color:pink;}

.another {color:orange;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group radior">
	
		<fieldset> 
			<legend aria-hidden="true">Legend1</legend>
				<div class="col-md-4">
					<div class="mainlabel" for="test1">Legend1</div>
				</div>
            	 
				<div class="col-md-8 
					 
						required
					">                           
					
						
						<label for="Option 1a ">
							<input required="" type="radio" tabindex="-1"> <span class="newone"><div class="moveme">Option 1a</div></span> 
						</label>
					
						
						<label for="Option 1b ">
							<input required="" type="radio" tabindex="-1"> <span class="newone"><div class="moveme">Option 1b</div></span> 
						</label>
						<label for="Option 1c">
							<input required="" type="radio" tabindex="-1"> <span class="newone"><div class="moveme">Option 1c</div></span> 
						</label>
                                               </div>
               
           
	</fieldset></div>
  
  <div class="form-group radior">
	
		<fieldset> 
			<legend aria-hidden="true">Legend2</legend>
				<div class="col-md-4">
					<div class="mainlabel" for="test2">Legend2</div>
				</div>
            	 
				<div class="col-md-8 
					 
						required
					">                           
					
						
						<label for="Option 2a">
							<input required="" type="radio" tabindex="-1"> <span class="newone"><div class="moveme">Option 1c</div></span> 
						</label>
            
            	<label for="Option 2b">
							<input required="" type="radio" tabindex="-1"> <span class="newone"><div class="moveme">Option 1c</div></span> 
						</label>
					

					
                                               </div>
                   
                      
	</fieldset></div>