I'm using NextUntil to toggle table rows. It works perfectly on one page, and on another page it only toggles the first row in NextUntil. As far as I can tell, the jquery and HTML are identical on both pages.
Page 1. (It works here)
Jquery.
$(".user-row").click(function () {
$(this).nextUntil(".user-row").toggle();
});
HTML.
<table>
<tr class="user-row">
<tr>....</tr>
<tr class="user-row">
<tr>....</tr>
<tr>....</tr>
<tr class="user-row">
<tr>....</tr>
<tr class="user-row">
<tr>....</tr>
</table>
Page 2. (Doesn't work, only toggles the first row)
Jquery.
$(".project-row").click(function () {
$(this).nextUntil(".project-row").toggle();
});
Html.
<table>
<tr class="project-row">
<tr>....</tr> <----- Only toggles this row
<tr>....</tr>
<tr>....</tr>
<tr class="project-row">
<tr>....</tr> <----- Only toggles this row
<tr>....</tr>
<tr class="project-row">
<tr>....</tr> <----- Only toggles this row
<tr class="project-row">
<tr>....</tr> <----- Only toggles this row
<tr>....</tr>
</table>
With my untrained eyes I see absolutely no difference between the pages. They do have very slightly different CSS, but I cant see how that would cause it.
More info:
I call this piece of code on document.ready to hide all of the sub rows (sub rows are all of the rows between .project-row or .user-row) at the start.
$(".project-row").nextUntil(".project-row").toggle();
It works on both pages. However, if I call this code on row click instead of
$(this).nextUntil(".project-row").toggle();
On Page 1, it works as expected, hiding all of the sub rows.
On page 2, it hides all of the sub rows of the other .project-row rows, but only hides the first sub row of the row clicked.
Any help would be appreciated, thanks.
More info:
Putting this
$(this).nextUntil(".project-row").each(function (i) {
alert($(this).attr("class"));
});
inside the click event alerts "undefined" (because the sub rows dont have classes) the correct number of times. This tells me that $(this).nextUntil(".project-row) is returning the correct elements. With the toggle, this
$(this).nextUntil(".project-row").toggle();
,immediately after it still only toggles the first row.