包裹類約2重複班的jQuery

Question

我有HTML，看起來像這樣：

<div class="imageRowHeader"> 
Header Content 
</div> 
<div class="imageRowContent"> 
    <img src="image.jpg"> 
</div> 

<div class="imageRowHeader"> 
Header Content 2 
</div> 
<div class="imageRowContent"> 
    <img src="image2.jpg"> 
</div> 

重複無數次。

我想用jQuery使它看起來像這樣（我不能直接改變HTML）。

<div class="imageRow"> 
    <div class="imageRowHeader"> 
    Header Content 
    </div> 
    <div class="imageRowContent"> 
     <img src="image.jpg"> 
    </div> 
</div> 

<div class="imageRow"> 
    <div class="imageRowHeader"> 
    Header Content 
    </div> 
    <div class="imageRowContent"> 
     <img src="image.jpg"> 
    </div> 
</div> 

Answer 1

您需要遍歷每個imageRowHeader，那麼對於目前的標題和一個內容同級元素，調用wrapAll()

$('.imageRowHeader').each(function() { 
 
    $(this).next().addBack().wrapAll('<div class="imageRow"></div>') 
 
})

.imageRow { 
 
    border: 1px solid grey; 
 
    margin-bottom: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="imageRowHeader"> 
 
    Header Content 
 
</div> 
 
<div class="imageRowContent"> 
 
    <img src="image.jpg"> 
 
</div> 
 

 
<div class="imageRowHeader"> 
 
    Header Content 2 
 
</div> 
 
<div class="imageRowContent"> 
 
    <img src="image2.jpg"> 
 
</div>