如何选择这些元素并将其包装？

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

Answer 3

使用最少的代码限制为两个，我会这样做：

DEMO

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