jQuery nextUntill id < num or alternative

Question

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 third 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.

Answer 1

This seems to work:

$(document).ready(function() {

    // instead of inline javascript
    $("button").click(function() {

        // get the second className
        var parentClass = $(this).parent().attr("class").split(" ")[1];
        $(this).parent().nextUntil("." + parentClass).hide();
    });
});

Slightly changed markup, getting rid of inline JS and numeric IDs (IDs are not really needed here anyway):

<li class="fp de1">test 1</li>
<li class="fp de1">test 2<button>Hide</button></li>
<li class="fp de2">test 3<button>Hide</button></li>
<li class="fp de3">test 4<button>Hide</button></li>
<li class="fp de4">test 5</li>
<li class="fp de3">test 6</li>
<li class="fp de3">test 7</li>
<li class="fp de1">test 8<button>Hide</button></li>
<li class="fp de2">test 9<button>Hide</button></li>
<li class="fp de3">test 10<button>Hide</button></li>
<li class="fp de4">test 11</li>

Answer 2

If I understand what you are trying to do I think it might work if you fix your ID issue and change the following line

$('#'+id).nextUntil('li.de'+de2).hide();

to something like

$('#'+id).nextUntil(selector).hide();

where selector is generated from de2 such that when de2 is 1 selector is 'li.de1', when de2 is 2 selector is 'li.de1, li.de2' and so on.