Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 694
  • Last Modified:

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

0
udara22
Asked:
udara22
  • 6
  • 4
2 Solutions
 
Kyle HamiltonData ScientistCommented:
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

0
 
udara22Author Commented:
@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.
0
 
Kyle HamiltonData ScientistCommented:
where do you want the hidden inputs and the instruction div?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
udara22Author Commented:
@kozaiwaniec: in 2nd column. Thanks heaps
0
 
Kyle HamiltonData ScientistCommented:
Actually, if you're able to manipulate the code, why not jus wrap the elements right in the HTML instead of using jquery?
0
 
udara22Author Commented:
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. :)
0
 
udara22Author Commented:
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?
0
 
udara22Author Commented:
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'/>");

Open in new window

0
 
Kyle HamiltonData ScientistCommented:
:)
0
 
udara22Author Commented:
mines goood too
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now