How can I select these elements and wrap them?

Question

I have a heading followed by two radio inputs and I need to wrap them so that I can style them in the form

<p><strong>Country</strong></p>
<div class="radioWrapper">
     <span class="label">Canada</span>
     <span class="radio">
          <input type="radio" value="Canada">
     </span>
</div>
<div class="radioWrapper">
     <span class="label">US</span>
     <span class="radio">
          <input type="radio" value="US">
     </span>
</div>

This is what I have, and around everything that I would like to contain a div. I tried to write some jquery, but that didn't work -

$( "strong:contains('Country')" ).nextAll( "div.radioWrapper" ).wrapAll("<div class='RadioWrap'></div>");

Can someone help me point in the right direction

Answer 1

You are almost right. Just select the parent element pand from there find the next one .radioWrapper. Note that you must also enable pusing the method andSelf:

$( "strong:contains('Country')")
    .closest('p')
    .nextAll("div.radioWrapper").andSelf()
    .wrapAll("<div class='RadioWrap'></div>");

Or another version using the nextUnti method:

$("strong:contains('Country')")
    .closest('p')
    .nextUntil(":not(.radioWrapper)").andSelf()
    .wrapAll("<div class='RadioWrap'></div>");

Check out the demo below.

$( "strong:contains('Country')").closest('p').nextAll( "div.radioWrapper" ).andSelf().wrapAll("<div class='RadioWrap'></div>");

.RadioWrap {background: #EEE;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><strong>Country</strong></p>
<div class="radioWrapper">
     <span class="label">Canada</span>
     <span class="radio">
          <input type="radio" value="Canada">
     </span>
</div>
<div class="radioWrapper">
     <span class="label">US</span>
     <span class="radio">
          <input type="radio" value="US">
     </span>
</div>

Run codeHide result

Answer 2

p div, b,

$( "p:has(strong:contains('Country'))" ).nextAll( "div.radioWrapper:lt(2)" ).wrapAll("<div class='RadioWrap'></div>")

http://jsfiddle.net/ya3arznn/1/

---

$( "p:has(strong:contains('Country'))" ).nextAll( "div.radioWrapper:lt(2)" ).wrapAll("<div class='RadioWrap'></div>")

.RadioWrap {color: blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><strong>Country</strong></p>
<div class="radioWrapper">
     <span class="label">Canada</span>
     <span class="radio">
          <input type="radio" value="Canada">
     </span>
</div>
<div class="radioWrapper">
     <span class="label">Trinidad</span>
     <span class="radio">
          <input type="radio" value="Trinidad">
     </span>
</div>
<div class="radioWrapper">
     <span class="label">US</span>
     <span class="radio">
          <input type="radio" value="US">
     </span>
</div>

Hide result

Answer 3

, :

DEMO

  $( "p:contains('Country')" )
    .add( ".radioWrapper:lt(2)" )
    .wrapAll("<div class='RadioWrap'/>");