javascript - 我怎样才能选择这些元素并包装它们？

Question

我有一个标题，后跟两个 radio 输入，我需要将它们包装起来，以便我可以将它们设置为表单样式

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