From IT major incidents to manufacturing line slowdowns, every business process generates insights that need to reach the people required to take action. You need a platform that integrates with your business tools to create fully enabled DevOps toolchains.
You need xMatters.
Course Of The Month
3 days, 16 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
jQuery n:th to devide content
Posted on 2012-07-15
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?
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>
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
-
6
4
10 Comments
add this to your stylesheet:
and this script to the page:
.col{float:left;}
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>
@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?
And I just want to seperate the content into 2 columns dives 4 item X4 item.
<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>
And I just want to seperate the content into 2 columns dives 4 item X4 item.
Actually, if you're able to manipulate the code, why not jus wrap the elements right in the HTML instead of using jquery?
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. :)
Hi. Ok i got this
only problem is how can i add the "br" to it?
$("#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'/>");
only problem is how can i add the "br" to it?
Thanks heaps mate. I figured it out.
You saved my life :D
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'/>");
Featured Post
Connect your existing build, deployment, management, monitoring, and collaboration platforms. From Puppet to Chef, HipChat to Slack, ServiceNow to JIRA, Splunk to New Relic and beyond, hand off data between systems to engage the right people.
Connect with xMatters.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS.
Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS
Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses
Course of the Month3 days, 16 hours left to enroll
690 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.