jQuery/CSS - Desire best way to add a div around the first 5 radio buttons and another div around the second 5 radio buttons

Hi,
I am looking for the best way to add a div around the first 5 radio buttons below and another div around the second 5 radio buttons. Then I want to add a border and label like a group box to the div.
My thought was to get the html and replace the 5th br with a div close and a div start and add the other pieces?
if that sounds like the best way, then how do I find the 5th br and replace it..
Note: I want the one radio group to act as it does, only allowing one selection.

#1st and 2nd new divs {
    border-radius: 10px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  border: 1px solid #AAA;
    padding: 20px; 
    width: 400px;
}

Open in new window


<div class="fieldControls">
<fieldset tabindex="-1" id="P400_CLASSIFICATION" class="radio_group">
<legend class="hideMeButHearMe"></legend>
<input type="radio" id="P400_CLASSIFICATION_0" name="p_t08" value="NEW_METH"><label for="P400_CLASSIFICATION_0">NEW METHOD</label><br>
<input type="radio" id="P400_CLASSIFICATION_1" name="p_t08" value="NEW_PROD"><label for="P400_CLASSIFICATION_1">NEW PRODUCT</label><br>
<input type="radio" id="P400_CLASSIFICATION_2" name="p_t08" value="EXPANSION"><label for="P400_CLASSIFICATION_2">EXPANSION</label><br>
<input type="radio" id="P400_CLASSIFICATION_3" name="p_t08" value="COST_RED"><label for="P400_CLASSIFICATION_3">COST REDUCTION</label><br>
<input type="radio" id="P400_CLASSIFICATION_4" name="p_t08" value="REQ_OTHER"><label for="P400_CLASSIFICATION_4">OTHER</label><br>
<input type="radio" id="P400_CLASSIFICATION_5" name="p_t08" value="NORMAL"><label for="P400_CLASSIFICATION_5">NORMAL REPLACEMENT</label><br>
<input type="radio" id="P400_CLASSIFICATION_6" name="p_t08" value="CONTRACT"><label for="P400_CLASSIFICATION_6">CONTRACT REQUIREMENT</label><br>
<input type="radio" id="P400_CLASSIFICATION_7" name="p_t08" value="OSHA"><label for="P400_CLASSIFICATION_7">SAFETY, HEALTH "OSHA"</label><br>
<input type="radio" id="P400_CLASSIFICATION_8" name="p_t08" value="LEGAL"><label for="P400_CLASSIFICATION_8">LEGAL</label><br>
<input type="radio" id="P400_CLASSIFICATION_9" name="p_t08" value="NON_OTHER"><label for="P400_CLASSIFICATION_9">OTHER</label>
</fieldset>
</div>

Open in new window

LVL 2
BILL CarlisleAPEX DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
This should do it for you.

<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
  var items= $('input:radio, label, br', '#P400_CLASSIFICATION');
  for(i = 0; i < items.length; i+=15) {
    var div = $('<div/>', {class : 'myClass'});
    items.slice(i, i+15).wrapAll(div);
  }
})
</script>

Open in new window

0
BILL CarlisleAPEX DeveloperAuthor Commented:
It doesn't work
0
BILL CarlisleAPEX DeveloperAuthor Commented:
How do I debug this? how do you detect if the object in the loop is a br
Actually I just looked up wrap() sounds cool..
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Julian HansenCommented:
Yes it does work

See working sample here

how do you detect if the object in the loop is a br
I don't - I know that the items are <input><label><br/> in groups of three so given that structure all that is needed is to put the items in the array and split it on 15 items.
0
hieloCommented:
This worked for me:
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function(){
    $('fieldset>*:not(legend):lt(14)').wrapAll('<div class="groupA"/>');

  $('fieldset>*:not(div,legend)').wrapAll('<div class="groupB"/>');
});
</script>

Open in new window


To help in debugging, try css classes with different colors:
.groupA{color:red;border: 1px solid black;}
.groupB{color:blue;border:1px solid black;margin-top:1em;}

Open in new window

0
BILL CarlisleAPEX DeveloperAuthor Commented:
Awesome! Thanks!

This is the way I did it but just realized the list is dynamic so there may be more the 5 or less than 5 each group.
The one thing will as be present is that both groups will have the OTHER (label) choice at the bottom of each.
How can I change lt(14) to find the OTHER label? (in case they would like a different ID in the dyn list)
$(function(){
  $('fieldset#P400_CLASSIFICATION>*:not(legend):lt(14)').wrapAll('<div class="require"><fieldset class="reqFieldset"></fieldset></div>');
  $('fieldset#P400_CLASSIFICATION>*:not(div,legend)').wrapAll('<div class="noRequire"><fieldset class="noReqFieldset"></fieldset></div>');
  $('.noReqFieldset :nth-child(1)').remove();
  $('.reqFieldset :first-child').before('<legend class="legends">My first title</legend>')
  $('.noReqFieldset :nth-child(1)').before('<legend class="legends">My second title</legend>')
  $('div#P400_CLASSIFICATION_CONTAINER').removeClass('horizontal fieldContainer');
});

Open in new window

0
hieloCommented:
replace the lt(14) with:
lt('+$('label:contains("OTHER")').index()+')

ex (based on my previous post):
$(function(){
    
    $('fieldset>*:not(legend):lt('+$('label:contains("OTHER")').index()+')').wrapAll('<div class="groupA"/>');

  $('fieldset>*:not(div,legend)').wrapAll('<div class="groupB"/>');
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BILL CarlisleAPEX DeveloperAuthor Commented:
Hi Hielo,
It wraps the whole radio group instead of 2 wraps... 2 OTHERS

$('label:contains("OTHER")').index() in the console returns 29 which is the second OTHER so it skips the first one..

thank you for your help,
Bill
0
BILL CarlisleAPEX DeveloperAuthor Commented:
$('label:contains("OTHER")')

returns
<label for="P400_CLASSIFICATION_4">OTHER</label>
<label for="P400_CLASSIFICATION_9">OTHER</label>
0
BILL CarlisleAPEX DeveloperAuthor Commented:
Got it..
I added .first()

$('fieldset#P400_CLASSIFICATION>*:not(legend):lt('+$('label:contains("OTHER")').first().index()+'
Makes sense... 14 nailed the 14th one... the $('label:contains("OTHER")').first().index() returned 2 items so it needed a loop but it returns the last of the 2, right?

Any input on that.. better way ?

Thank you for your help.. Bill
0
hieloCommented:
>> $('label:contains("OTHER")').index() in the console returns 29
Interesting.  I am using jQuery 2.1.3 and  
alert( $('label:contains("OTHER")').index() );

Open in new window


evaluates to 14 (the first "OTHER").

You could append ":eq(0)" to make sure it get the index of the first:
 alert( $('label:contains("OTHER"):eq(0)').index() )

$('fieldset>*:not(legend):lt('+$('label:contains("OTHER"):eq(0)').index()+')').wrapAll('<div class="groupA"/>');
0
BILL CarlisleAPEX DeveloperAuthor Commented:
Thank you!

Julian, I checked out your example and as you said it works great.. but it didn't work in mine for some unknown reason.. I couldn't understand what it was doing and asked for a way to debug it but then Hielo's made sense to me.. thanks for the help..
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.