Wrapping containter divs around n number of divs
Hi,
I am new to the forum and so hope I have posted this in the right place and that it makes sense.
I am currently developing an site using a shopping cart software and so in some cases I have limited access to certain files and so am trying to use jQuery to make some amendments to the the appearance of some search refinement filters.
The code provided for two separate filters currently looks like this:
-
<div class="refinement_custom_category_section">Filter 1</div>
<div class="refinement_filter">a</div>
<div class="refinement_filter">b</div>
<div class="refinement_custom_category_section">Filter 2</div>
<div class="refinement_filter">a</div>
<div class="refinement_filter">b</div>
<div class="refinement_filter">c</div>
<div class="divider"></div>
As you can see the software provides titles for both filters with the same class and the same for the different filters options. I would like to wrap each different filter in it's own class so that I can control the styling for both individually e.g.
-
<div class="custom_filter1_wrap">
<div class="refinement_custom_category_section">Filter 1</div>
<div class="refinement_filter">a</div>
<div class="refinement_filter">b</div>
</div>
<div class="custom_filter2_wrap">
<div class="refinement_custom_category_section">Filter 2</div>
<div class="refinement_filter">a</div>
<div class="refinement_filter">b</div>
<div class="refinement_filter">c</div>
</div>
<div class="divider"></div>
The number of filters & corresponding options will vary depending on the products on the page so any solution would need to be able to take this into account. I am new to jQuery and so have been struggling to find a way to solve this myself and so any help would be much appreciated.
Thanks in advance.
Jon