Jquery - .next() with children of many parents

Question

I'm writing a script to highlight table cells across multiple tables, in a calendar. The days to be highlighted have the class "available". This is the jQuery code currently:

$(document).ready(function(){
$("td.available").mouseenter(function() {
 $(this).addClass("highlight");
 $(this).next().addClass("highlight");
});
$("td.available").mouseleave(function() {
 $(this).removeClass("highlight");
 $(this).next().removeClass("highlight");
})
});

However, highlighting only works within the table containing the element being hovered over. I assume .next() isn't operating over the set returned by $("td.available"), but over the raw DOM.

What function should i be using to operate over the set properly?

Edit: What I want to happen is for the adjacent cell to be highlighted as well. This could be expanded so the next 7 cells are highlighted as well, for example.

If I hover over the cell containing 31, the other cells to highlight are going to be in another table, containing the next month. I'm guessing I need to use some variety of "each" to get a set of td elements.

Answer 1

You need to use each(). next() only walks the DOM.

Answer 2

I'm not sure exactly what you are trying to do, but next() will only get the next element, not all of the elements following the element being triggered. You might want to use nextAll() with a selector of 'td.available'. Alternatively, you may just need to reselect all the table cells, if the elements to be unhighlighted are not just those following the current cell.

Answer 3

when the $(this) inside the mouseenter event is called, it MEANS the particular TD which is mouse entered, but not the whole set of td.available in your document.

That means, $(this).addClass(...) add the class to the "hovered" td, and $(this).next().addClass(...) would add the class to the siblings of the "hovered" td, even it is not available.

I am not particular sure what you expected, but if you want the user to hover the table, and then all available cell will "light" up, then you can try with following:

$(".tableNeedToLightUp").mouseenter(function(){
    $("td.available", this).addClass("highlight"); // This select all available tds in the table, if all table light up, take away "this"
}

And the mouseout event would be similar.

Answer 4

If I understood your intention correctly, this should do the trick:

function highlight_all_available_tds() {
    $("td.available").addClass("highlight");
}

function remove_highlight_from_available_tds() {
    $("td.available").removeClass("highlight");
}

$(document).ready(function () {
    $("td.available").
        mouseenter(highlight_all_available_tds).
        mouseleave(remove_highlight_from_available_tds);
});

Answer 5

Hello friends,

JQuery gives new next functions in it's latest version(1.4). I have mentioned the function's short description in my post. Please see it and do the best using JQuery. Here is the link

http://aspnet-ajax-aspnetmvc.blogspot.com/2010/10/jquery-next-fucntion-with.html

Thanks, Mohan Prajapati