jquery - 选择后面的类而不选择所有

Question

我在选择某些课程时遇到了一些问题。在下面的示例中，第一个标题下面有两个“fontstyle”类，而第二个标题有一个。这个结构最终会被重复，每个项目都应用不同数量的fontstyle类（动态内容编辑器）

我希望能够抓住每个标题下的每种字体样式并将其附加到“content-wrapper”。但是，我相信我将要遇到的问题是，当试图抓住第一个标题旁边的两个fontstyle类时，底部的另一个fontstyle类也将被选中。反正有吗？

谢谢大家。感谢任何帮助。

<div class="header">
    <div class="content-wrapper"></div>
</div >    
<div class="fontstyle"></div >
<div class="fontstyle"></div >

<div class="header">
    <div class="content-wrapper"></div>
</div >
<div  class="fontstyle"></div >

编辑：道歉。我已经更新了结构。我试图将字体样式类放到它上面的内容包装器中。这是我最后想要的结构（对于这种情况）

<div class="header">
    <div class="content-wrapper">
        <div class="fontstyle"></div >
        <div class="fontstyle"></div >
    </div>
</div >    


<div class="header">
    <div class="content-wrapper">
         <div  class="fontstyle"></div >
    </div>
</div >

Answer 1

您可以使用+选择器。然后你可以给出确切的兄弟模式。

$(".header +.content-wrapper + .fontstyle")

Fiddle

修改

有关更新的问题。在这里，您需要遍历每个.header，然后找到.fontstyle元素直到下一个.header。然后将这些元素附加到相应的.contentwraper

$(".header").each(function () {
    var fontStyle = $(this).nextUntil(".header").filter(".fontstyle");
    $(this).find(".content-wrapper").append(fontStyle);
});