Recently I was working on a project that used a shortcode to output tabbed content on the page. For styling purposes, all groups of siblings (adjacent HTML elements with the same
.sibling-element selector) that were produced by the shortcode needed to be wrapped in a common parent container.
Fortunately with jQuery, the task wasn’t too difficult. Step 1 was to target the first element in each
.sibling-element group. This was accomplished with:
$(':not(.sibling-element) + .sibling-element, * > .sibling-element:first-of-type');
Next we iterated over each of those elements and select all subsequent
.sibling-element selectors in the group with:
Finally, we wrapped the sibling groups with the
Here it is all put together:
Check out the Gist if you just want to see the code.
I generally prefer to use PHP to output HTML, but in cases such as this it makes more sense to use a little jQuery to get the job done.