标签: wrapall

是否可以使用nth-child选择器来包装3个div .wrapAll？我似乎无法弄清楚正确的等式.

所以...

<div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
</div>

成为...

<div>
   <div class="new">
        <div></div>
        <div></div>
        <div></div>
   </div>
   <div class="new">
        <div></div>
        <div></div>
        <div></div>
   </div>
</div>

请考虑以下代码:( 这里的实例)

HTML:

$(function() {
  var wrapper = $("<div class='wrapper'></div>");
  $(".a").wrapAll(wrapper);
  wrapper.css("border", "5px solid black"); // Doesn't work
});

CSS:

.wrapper {
  background-color: #777;
}

JS:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="a">Hello</div>
<div class="a">Stack</div>
<div class="a">Overflow</div>

获取创建的包装器并更改其属性的正确方法是什么？

注意:.wrapper DOM中还有其他元素,因此不起作用:

$(".wrapper").css("border", "5px solid black");

我也不想为id创建的包装器赋予唯一性.

我试图使用jQuery在段落的末尾添加其他文本.我的想法是产生这样的结构:

从我的答案来看,我会澄清.我需要先创建这个结构.这是我觉得困难的部分,而不是第二个最终结果.那么我该如何动态创建:

<p>old-dynamic-text<span id="add_here"></span></p>

然后在添加新文本后,它将如下所示:

<p>old-dynamic-text<span id="add_here">new-dynamic-text</span></p>

我一直在使用.wrapAll()方法,但我无法达到预期的效果.这是执行此操作的最佳方式(如果是这样的话),还是有另一种方法将新文本附加到现有段落的末尾(需要将其包装在某种类型的标记中,因为我需要以不同的方式设置样式) ？

您好我想使用jQuery在div中包装类元素集但无法找到解决方案

HTML:

<div class="view-content">

  <div class="first">content</div>
  <div class="first">content</div>
  <div class="second">content</div>
  <div class="third">content</div>
  <div class="third">content</div>

</div>

期望的结果:

<div class="view-content">

  <div class="column">
    <div class="first">content</div>
    <div class="first">content</div>
  </div>

  <div class="column">
    <div class="second">content</div>
  </div>

  <div class="column">
    <div class="third">content</div>
    <div class="third">content</div>
  </div>

</div>

感谢您的帮助!

我正在使用nextUntil方法来获取两个元素之间的所有东西.但是这种方法不包括text nodes输出.它给出了一个像数组[<br>, <br>, <br>].我如何获得包括文本节点在内的所有内容？谢谢.

这是html代码:

$('.content a:contains("spoiler").b:even').each(function() {
  $(this).nextUntil('.content a:contains("spoiler").b')
    .wrapAll('<div style="border:solid 1px black;"></div>');
});

这是我愚蠢的js代码:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  --- <a class="b" href="/?q=spoiler">spoiler</a> ---
  <br>
  <br> dangerous text here
  <br> --- <a class="b" href="/?q=spoiler">spoiler</a> ---
  <br> safe text here
  <br> --- <a class="b" href="/?q=spoiler">spoiler</a> ---
  <br>
  <br> dangerous text here
  <br> --- <a class="b" href="/?q=spoiler">spoiler</a> ---
</div>

jsfiddle:http://jsfiddle.net/Lwk97rvq/1/

我正在使用stackoverflow上的成员建议的一些代码,并由我调整以包装每个3列表项作为大型菜单的一部分.代码是:

var lis = $("ul > li");
for(var i = 0; i < ls.length; i+=3) {
  lis.slice(i, i+3).wrapAll("<div class='new'></div>");
}

不幸的是,这将从下一个父菜单中获取子li,以填充div中3 li的'quota'.这当然是大大搞砸了我的菜单.有关示例,请访问此处.

有没有人有任何建议如何解决这个问题？

我试图将以下价格和文本包装在一起,所有这些都在一个DIV中.

这就是我所拥有的:

<table cellspacing="0" cellpadding="0" border="0" class="thePrices">
  <tbody>
    <tr>
      <td>
        <font class="text colors_text">
          <b>MSRP: <span class="priceis">$90.00</span></b>
        </font><br>
        <b><font class="pricecolor colors_productprice">
                     <font class="text colors_text"><b>Burkett Price:</b></font>
        <span class="priceis">$289<sup>.99</sup></span>
        </font>
        </b><br>
        <a href="a link">A link goes here</a>
        <table>A TABLE WITH STUFF GOES HERE</table>
      </td>
    </tr>
  </tbody>
</table>

这是我想要得到的:

<table cellspacing="0" cellpadding="0" border="0" class="thePrices">
  <tbody>
    <tr>
      <td>
        **
        <div class="pricebox">**
          <font class="text colors_text">
            <b>MSRP: <span class="priceis">$90.00</span></b>
          </font><br>
          <b><font class="pricecolor colors_productprice">
                         <font class="text colors_text"><b>Burkett Price:</b></font>
          <span class="priceis">$289<sup>.99</sup></span>
          </font>
          </b><br> **
        </div>**
        <a href="a link">A link …

是否有一个只包装连续元素的wrapAll版本？所以这:

<p>foo</p>
<p>foo</p>
<h2>bar</h2>
<p>foo</p>

变成这样:

<div>
    <p>foo</p>
    <p>foo</p>
</div>
<h2>bar</h2>
<div>
    <p>foo</p>
</div>

什么时候运行？

$('p').wrapAll2('<div />')

jQuery.wrapAll函数接受一个dom子树并将其包装在jQuery对象周围.我想这样做,但没有通过选择器获取目标jQuery对象:我有一堆jQuery包装DOM元素的引用,我想将wrapAll应用于所有这些.是否可以在不指定公共类并通过类选择它的情况下完成它？

所以我试图在div中包含一系列子元素,以便在组中操作它们; 试图将每个小组定位在不同的地方.场景是我有一个随机生成li标签的列表,无论有多少出现我需要分别操作每一组十个.

为了解决这个问题,我使用了一份书面清单:

$("ul li ul li:nth-child(n+11)").wrapAll("<span class='shift' />");

现在我已经能够使用以下方法轻松地将孩子们包裹在div中.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="access">
  <div class="menu">
    <ul>
      <li>
        <p>Hello</p>
        <ul>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff2</li>
          <li>Stuff2</li>
          <li>Stuff2</li>
          <li>Stuff2</li>
          <li>Stuff2</li>
          <li>Stuff2</li>
          <li>Stuff2</li>
          <li>Stuff2</li>
          <li>Stuff2</li>
          <li>Stuff2</li>
          <li>Stuff3</li>
          <li>Stuff3</li>
          <li>Stuff3</li>
          <li>Stuff3</li>
          <li>Stuff3</li>
          <li>Stuff3</li>
          <li>Stuff3</li>
          <li>Stuff3</li>
          <li>Stuff3</li>
          <li>Stuff3</li>

        </ul>
      </li>
    </ul>
  </div>
</div>

但这当然不是我需要的.

这是我正在处理的代码.

var count = $("ul li ul li").length;
for(var c = 11; c<=count;c+=10){
$("ul li ul li:nth-child(n+"+c+")").wrapAll("<span class='shift' />");
}

这种工作但它创建了shift类的嵌套实例.

我需要单独的包装器div.如果我要编写代码,它将是:

 $("ul li …