Response title
This is preview!
Dynamic jQuery tabs, closing and opening UL mid list
in Using jQuery
•
11 years ago
Hi all,
I am looking to create a gallery using an unordered list. The gallery is created dynamically via a CMS, so the number of images will vary.
What I wanted to do was:
Display the first 9 images in the gallery (this will be styled so there are 3 images per row, so 3 columns 3 rows)
If there are more than 9 images, I wanted to, via jQuery, close the UL after the 9th image, then reopen the UL
Then again via jQuery, on load hide all but the first UL, then use Next/Previous buttons to cycle through the other ULs (the remaining images in the gallery)
I have set this up, but the problem I am having is the way the closing ul and opening ul is reordered (basically swapped round to an opening/closing ul)
My HTML is as follows:
- <ul><li><a href="#"><img src="/img/image.jpg" alt="" /></a></li><li><a href="#"><img src="/img/image.jpg" alt="" /></a></li><li><a href="#"><img src="/img/image.jpg" alt="" /></a></li><li><a href="#"><img src="/img/image.jpg" alt="" /></a></li><li><a href="#"><img src="/img/image.jpg" alt="" /></a></li><li><a href="#"><img src="/img/image.jpg" alt="" /></a></li><li><a href="#"><img src="/img/image.jpg" alt="" /></a></li><li><a href="#"><img src="/img/image.jpg" alt="" /></a></li><li><a href="#"><img src="/img/image.jpg" alt="" /></a></li><li><a href="#"><img src="/img/image.jpg" alt="" /></a></li><li><a href="#"><img src="/img/image.jpg" alt="" /></a></li><li><a href="#"><img src="/img/image.jpg" alt="" /></a></li><li><a href="#"><img src="/img/image.jpg" alt="" /></a></li><li><a href="#"><img src="/img/image.jpg" alt="" /></a></li></ul>
The jQuery I am using:
- $('</ul><ul>').insertAfter( $('#images li:nth-child(9n)') );
The problem is it is formatting as:
- <ul><li><a href="#"><img src="/img/image.jpg" alt="" /></a></li><li><a href="#"><img src="/img/image.jpg" alt="" /></a></li><li><a href="#"><img src="/img/image.jpg" alt="" /></a></li><li><a href="#"><img src="/img/image.jpg" alt="" /></a></li><li><a href="#"><img src="/img/image.jpg" alt="" /></a></li><li><a href="#"><img src="/img/image.jpg" alt="" /></a></li><li><a href="#"><img src="/img/image.jpg" alt="" /></a></li><li><a href="#"><img src="/img/image.jpg" alt="" /></a></li><li><a href="#"><img src="/img/image.jpg" alt="" /></a></li><ul></ul><li><a href="#"><img src="/img/image.jpg" alt="" /></a></li><li><a href="#"><img src="/img/image.jpg" alt="" /></a></li><li><a href="#"><img src="/img/image.jpg" alt="" /></a></li><li><a href="#"><img src="/img/image.jpg" alt="" /></a></li><li><a href="#"><img src="/img/image.jpg" alt="" /></a></li></ul>
Can anybody please help?
Many thanks
1