Как я могу выбрать эти элементы и обернуть их?

Question

У меня есть заголовок и двумя входами радио, и мне нужно, чтобы обернуть их, так что я могу укладывать их в форме

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

Вот что у меня есть, и вокруг всего я хотел бы, содержащий DIV. Я попытался написать несколько JQuery, но это не сработало -

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

Может кто-то помочь мне точку в правильном направлении

Answer 1

Вы почти правильно. Просто выберите родителя p элемент и оттуда найдите следующий .radioWrapper. Обратите внимание, что вы также должны включать p с andSelf методом:

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

Или другой вариант с использованием метода nextUnti:

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

Проверьте демо ниже.

$("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>

Answer 2

p является родственный дивы так это то, что вы должны выбрать первый не 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>

Answer 3

ограничить до двух с минимальным кодом, я бы это сделать:

DEMO

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