Question

对不起，我对JQuery有点陌生-我已经阅读了一些有关如何使用JQuery向现有元素添加元素的内容，但是我在以下方面苦苦挣扎：

我在页面上有大量的div元素列表，每个元素都有唯一的类-例如

<div class="example">content</div>
<div class="example1">content</div>
<div class="example2">content</div>
<div class="example3">content</div>
<div class="example4">content</div>
<div class="example5">content</div>
<div class="example6">content</div>
<div class="example7">content</div>
<div class="example8">content</div>

列表更长，并且不使用“ example”-它们是不同的，所以我无法匹配“ example x”

我想做的是在某些现有div的前后使用wrapall（）添加一个div，所以我最终得到了

<div class="new-class">
<div class="example">content</div>
<div class="example1">content</div>
<div class="example2">content</div>
<div class="example3">content</div>
<div class="example4">content</div>
</div>
<div class="example5">content</div>
<div class="example6">content</div>
<div class="example7">content</div>
<div class="example8">content</div>

我已阅读到可以执行以下操作

$('.example, .example1, .example2, .example3, .example4').wrapAll('<div class="new-class" />');

但是我的列表很大，如果不需要，我不想单独添加每个div ... 有没有办法说“ .example和.example4之间的wrappAll”（按照我上面的示例）

谢谢

Answer 1

注意：nextUntil不包括 to 元素

jQuery> = 3：addBack()

$(".example").nextUntil(".example5").addBack().wrapAll("<div class='newClass'/>")

.newClass { color:red }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="example">content</div>
<div class="example1">content</div>
<div class="example2">content</div>
<div class="example3">content</div>
<div class="example4">content</div>
<div class="example5">content</div>
<div class="example6">content</div>
<div class="example7">content</div>
<div class="example8">content</div>

jQuery <3：andSelf()

$(".example").nextUntil(".example5").andSelf().wrapAll("<div class='newClass'/>")

.newClass { color:red }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="example">content</div>
<div class="example1">content</div>
<div class="example2">content</div>
<div class="example3">content</div>
<div class="example4">content</div>
<div class="example5">content</div>
<div class="example6">content</div>
<div class="example7">content</div>
<div class="example8">content</div>

无需命名div，我们可以使用slice：

let start = 0, end = 5; // from - to including needs +1
$("div").slice(start,end+1).wrapAll("<div class='newClass'/>")

.newClass { color:red }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="example0">content 0</div>
<div class="example1">content 1</div>
<div class="example2">content 2</div>
<div class="example3">content 3</div>
<div class="example4">content 4</div>
<div class="example5">content 5</div>
<div class="example6">content 6</div>
<div class="example7">content 7</div>
<div class="example8">content 8</div>

使用JQuery将<div>添加到大量现有<div>的列表之前，并将</div>添加到

1 个答案: