Experts Exchange connects you with the people and services you need so you can get back to work.

jQuery n:th to devide content

Hi Experts, I have a little question and Im kind of stuck with it.

I have this code, generated automatically using php.

What I want to do is, move the last div ( id="uniform-field_8_2" ) to the right so it looks like 2 columns. Left column div#uniform-field_8_0 and div#uniform-field_8_1 and 2nd column div#uniform-field_8_2. Can you guys help me out with it, I feel using jQuery's nth technique might do this?

<div class="col_field">
  <div class="checker" id="uniform-field_8_0"><span>
    <input type="checkbox" class="form_checkbox" value="Technology" id="field_8_0" name="Checkbox01_field_8" style="opacity: 0;">
    </span></div>
  <label for="field_8_0" class="form_choice_text">Technology</label>
  <br>
  <div class="checker" id="uniform-field_8_1"><span>
    <input type="checkbox" class="form_checkbox" value="Training and Education" id="field_8_1" name="Checkbox02_field_8" style="opacity: 0;">
    </span></div>
  <label for="field_8_1" class="form_choice_text">Training and Education</label>
  <br>
  <div class="checker" id="uniform-field_8_2"><span>
    <input type="checkbox" class="form_checkbox" value="Head office support" id="field_8_2" name="Checkbox03_field_8" style="opacity: 0;">
    </span></div>
  <label for="field_8_2" class="form_choice_text">Head office support</label>
  <br>
 </div>

Open in new window

udara22

Asked: 2012-07-15

Advertise Here

2 Solutions

LVL 25

Kyle HamiltonData ScientistCommented: 2012-07-15

add this to your stylesheet:

.col{float:left;}

Open in new window

and this script to the page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
        $(function(){
	
        $("#uniform-field_8_0, label[for='field_8_0'], label[for='field_8_0'] + br").wrapAll("<div class='wrap1'/>");
        $("#uniform-field_8_1, label[for='field_8_1'], label[for='field_8_1'] + br").wrapAll("<div class='wrap2'/>");
        $("#uniform-field_8_2, label[for='field_8_2'], label[for='field_8_2'] + br").wrapAll("<div class='wrap3'/>");
	
        $(".wrap1, .wrap2").wrapAll("<div class='col'/>");
        $(".wrap3").wrapAll("<div class='col'/>");

});
    </script>

Open in new window

udara22Author Commented: 2012-07-16

@kozaiwaniec : Thanks heaps. It kinda did something to the code. Unfourtunately I had to change the code a bit and finding it hard to figure out how jQuery puts the divs around the content. Would you please be able to show me the code for this?

<div class="col_field">
	<div class="checker" id="uniform-field_8_0"><span><input type="checkbox" class="form_checkbox" value="Technology" id="field_8_0" name="Checkbox01_field_8" style="opacity: 0;"></span></div><label for="field_8_0" class="form_choice_text">Technology</label><br>	
<div class="checker" id="uniform-field_8_1"><span><input type="checkbox" class="form_checkbox" value="Training and education" id="field_8_1" name="Checkbox02_field_8" style="opacity: 0;"></span></div><label for="field_8_1" class="form_choice_text">Training and education</label><br>	
<div class="checker" id="uniform-field_8_2"><span><input type="checkbox" class="form_checkbox" value="Head office support" id="field_8_2" name="Checkbox03_field_8" style="opacity: 0;"></span></div><label for="field_8_2" class="form_choice_text">Head office support</label><br>	
<div class="checker" id="uniform-field_8_3"><span><input type="checkbox" class="form_checkbox" value="Marketing support" id="field_8_3" name="Checkbox04_field_8" style="opacity: 0;"></span></div><label for="field_8_3" class="form_choice_text">Marketing support</label><br>	
<div class="checker" id="uniform-field_8_4"><span><input type="checkbox" class="form_checkbox" value="More leads" id="field_8_4" name="Checkbox05_field_8" style="opacity: 0;"></span></div><label for="field_8_4" class="form_choice_text">More leads</label><br>	
<div class="checker" id="uniform-field_8_5"><span><input type="checkbox" class="form_checkbox" value="Diversification" id="field_8_5" name="Checkbox06_field_8" style="opacity: 0;"></span></div><label for="field_8_5" class="form_choice_text">Diversification</label><br>	
<div class="checker" id="uniform-field_8_6"><span><input type="checkbox" class="form_checkbox" value="None of the above" id="field_8_6" name="Checkbox07_field_8" style="opacity: 0;"></span></div><label for="field_8_6" class="form_choice_text">None of the above</label><br>	
<div class="checker" id="uniform-field_8_7"><span><input type="checkbox" onclick="toggleOtherInputBox('field_8','checkbox', 'field_8_7')" class="form_checkbox" value="other" id="field_8_7" name="Checkbox08_field_8" style="opacity: 0;"></span></div><label for="field_8_7" class="form_choice_text">Other</label><br>	
<input type="hidden" value="8" name="field_8_length">	
<input type="hidden" value="0" id="field_8_other_check" name="field_8_other_check">	
<input type="text" style="display:none;" class="text_box text" value="" id="field_8_other" name="field_8_other">	<div class="instruction" id="field_8_tip"></div>
	</div>

Open in new window

And I just want to seperate the content into 2 columns dives 4 item X4 item.

LVL 25

Kyle HamiltonData ScientistCommented: 2012-07-16

where do you want the hidden inputs and the instruction div?

udara22Author Commented: 2012-07-16

@kozaiwaniec: in 2nd column. Thanks heaps

LVL 25

Kyle HamiltonData ScientistCommented: 2012-07-16

Actually, if you're able to manipulate the code, why not jus wrap the elements right in the HTML instead of using jquery?

udara22Author Commented: 2012-07-16

Becuase of the way they are structures, I cant do it using css. if you can do it in jQuery that'll be very helpful. :)

udara22Author Commented: 2012-07-16

Hi. Ok i got this

      $("#uniform-field_8_0, label[for='field_8_0'],  #uniform-field_8_1, label[for='field_8_1'],  #uniform-field_8_2, label[for='field_8_2'] , #uniform-field_8_3, label[for='field_8_3'] ").wrapAll("<div class='wrap1'/>");
		
		 $("#uniform-field_8_4, label[for='field_8_4'], #uniform-field_8_5, label[for='field_8_5'],  #uniform-field_8_6, label[for='field_8_6'] , #uniform-field_8_7, label[for='field_8_7'] ").wrapAll("<div class='wrap2'/>");

Open in new window

only problem is how can i add the "br" to it?

udara22Author Commented: 2012-07-16

Thanks heaps mate. I figured it out.

You saved my life :D

	  $("#uniform-field_8_0, label[for='field_8_0']").wrapAll("<div class='wrap1'/>");
		  $("#uniform-field_8_1, label[for='field_8_1']").wrapAll("<div class='wrap2'/>");
		  $("#uniform-field_8_2, label[for='field_8_2']").wrapAll("<div class='wrap3'/>");
		  $("#uniform-field_8_3, label[for='field_8_3']").wrapAll("<div class='wrap4'/>");
		  
		  $("#uniform-field_8_4, label[for='field_8_4']").wrapAll("<div class='wrap5'/>");
		  $("#uniform-field_8_5, label[for='field_8_5']").wrapAll("<div class='wrap6'/>");
		  $("#uniform-field_8_6, label[for='field_8_6']").wrapAll("<div class='wrap7'/>");
		  $("#uniform-field_8_7, label[for='field_8_7']").wrapAll("<div class='wrap8'/>");
		  
		  $("#field_8_other").wrapAll("<div class='wrap9'/>");
       
		  $(".wrap1, .wrap2, .wrap3 , .wrap4").wrapAll("<div class='col'/>");
          $(".wrap5, .wrap6, .wrap7 , .wrap8, .wrap9").wrapAll("<div class='col'/>");