Hi, i'm using jQuery to show/hide different LI-elements based on their classes. Look at this example.
<li id="1" class="fp de1"></li>
<li id="2" class="fp de1"><button onclick="hide(2,2);"></li>
<li id="3" class="fp de2"><button onclick="hide(3,3);"></li>
<li id="4" class="fp de3"><button onclick="hide(4,4);"></li>
<li id="5" class="fp de4"></li>
<li id="6" class="fp de3"></li>
<li id="7" class="fp de3"></li>
<li id="8" class="fp de1"><button onclick="hide(8,2);"></li>
<li id="9" class="fp de2"><button onclick="hide(9,3);"></li>
<li id="10" class="fp de3"><button onclick="hide(10,4);"></li>
<li id="11" class="fp de4"></li>
You se that some of these have a button with a hide funcion. what i want is that when you press the hide button The following elements the have a highernumber in the .de# class should be hidden untill it reaches a LI with the same .de#-class.
so if you press the hide(), i want LIs with ids 3,4,5,6,7 to be hiden.
if i press the next on i want 4,5,6,7, and the thirs i want id 5 to be hidden.
so this is the Javascript i made for it:
function hide(id,de){
var de2 = de-1;
$('#'+id).nextUntil('li.de'+de2).hide();
}
The problem is that this function is not working exactly as i want. it would work correctly in the first hide()-function and the thirs but not in hide()function number two. here it will hide IDs: 4-8. so i want to do something. so i want the nextuntill() to hide elements untill it reaches a LI-element with the same .de# or a lower .de#.
i hope i didn't complicate it to much in my description of the problem. if you have better idea than using nextUntill i'm all ears.