How can I group a list of IDs based on the highest number?
I have written some code that writes a list
<ul class="portfolios" style="opacity: 1;">
<li class="image0">
<li class="image1">
<li class="image2">
<li class="image3">
<li class="image4">
<li class="image5">
&开发者_运维百科lt;li class="image6">
<li class="image0">
<li class="image1">
<li class="image2">
<li class="image3">
<li class="image4">
<li class="image5">
<li class="image6">
<li class="image7">
<li class="image8">
<li class="image9">
<li class="image10">
<li class="image0">
<li class="image1">
<li class="image2">
<li class="image3">
<li class="image4">
<li class="image5">
<li class="image6">
<li class="image7">
</ul>
I can't change the HTML too much as it's an array each statement that is writing the list. I want to know if it's possible to take the first lot of classes image0 - image6 and wrap them in a div the same with the second lot of image classes image0-image7 and the third lot image0-image10.
This code isn't pretty but it works, I just would like to wrap in a div.
Any ideas?
Changed from ID to class, same problem though
I want to produce this...
<ul class="portfolios" style="opacity: 1;">
<li class="image0">
<li class="image1">
<li class="image2">
<li class="image3">
<li class="image4">
<li class="image5">
<li class="image6">
</ul>
<ul class="portfolios" style="opacity: 1;">
<li class="image0">
<li class="image1">
<li class="image2">
<li class="image3">
<li class="image4">
<li class="image5">
<li class="image6">
<li class="image7">
<li class="image8">
<li class="image9">
<li class="image10">
</ul>
<ul class="portfolios" style="opacity: 1;">
<li class="image0">
<li class="image1">
<li class="image2">
<li class="image3">
<li class="image4">
<li class="image5">
<li class="image6">
<li class="image7">
</ul>
You are (and will be) producing invalid HTML:
- IDs must be unique within the document
- The ul element cannot contain div elements
Try to paste the following code into http://validator.w3.org/check and see the errors
<!DOCTYPE HTML >
<html>
<head><title>Blah</title></head>
<body>
<ul>
<li id="myli_1">Blah</li>
<div>
<li id="myli_2">Blah</li>
<li id="myli_1">Blah</li>
</div>
</ul>
</body>
</html>
Instead you should:
- Group your images into separate UL elements
- Assign them a unique ID if this is really needed
For instance :
<ul id="portfolio0" class="portfolios">
<li id="image0_0" class="ui-draggable">
<li id="image0_1" class="ui-draggable">
<li id="image0_2" class="ui-draggable">
<li id="image0_3" class="ui-draggable">
<li id="image0_4" class="ui-draggable">
<li id="image0_5" class="ui-draggable">
<li id="image0_6" class="ui-draggable">
</ul>
<ul id="portfolio1" class="portfolios">
<li id="image1_0" class="ui-draggable">
<li id="image1_1" class="ui-draggable">
<li id="image1_2" class="ui-draggable">
<li id="image1_3" class="ui-draggable">
<li id="image1_4" class="ui-draggable">
</ul>
http://jsfiddle.net/b7KkU/
relevant jquery:
//Create the other two ul's (I've added id's for convenienece)
$("body")
.append("<ul id='two' class='portfolios'>")
.append("<ul id='three' class='portfolios'>");
portfoliosLen = $(".portfolios li").length;
for (i=0; i<portfoliosLen; i++) {
if (i < 7) { // <-- first 7 li
//Do nothing (Basically, leave it in this ul)
}
else if (i >= 7 && i < 15 ) { // <-- next 8 li
//Move to second ul
$(".portfolios li").eq(7).appendTo("ul#two");
/*
From the above code eq(7) remains constant. eq(7) = 8th li
This means take the 8th element from this ul and move it.
*/
}
else { // <-- remaining li
//Move to third ul
$(".portfolios li").eq(7).appendTo("ul#three");
/*
On each iteration of the for loop, we're taking the 8th li
and moving it somewhere.
*/
}
}
加载中,请稍侯......
精彩评论