asked on

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

SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

BILL Carlisle

ASKER

It doesn't work

BILL Carlisle

ASKER

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..

Julian Hansen

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.

hielo

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

BILL Carlisle

ASKER

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

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

BILL Carlisle

ASKER

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

BILL Carlisle

ASKER

$('label:contains("OTHER")')

returns
<label for="P400_CLASSIFICATION_4">OTHER</label>
<label for="P400_CLASSIFICATION_9">OTHER</label>

BILL Carlisle

ASKER

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

SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

BILL Carlisle

ASKER

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..