CODEWITHSUNDEEP
jquery
Craig Lafferty
Craig Lafferty

Reputation: 791

Jquery .next() is not working

I am populating the following html structure with days that will include the day of the week as well as the day of the month. The first "day" is populated as expected but using .next() I am not able to change the siblings in resultsContainer. Any suggestions?

<div id="eventInfoWindow">
    <div id="dayOneEvents" class="eventContainers">
        <div id="dayOneHeader" class="eventHeaders">
            <p id="dayOneDay" class="eventDay"></p>
            <p id="dayOneWeek" class="eventWeek"></p>
        </div>
    </div>
    <div id="dayTwoEvents" class="eventContainers">
        <div id="dayTwoHeader" class="eventHeaders">
            <p id="dayTwoDay" class="eventDay"></p>
            <p id="dayTwoWeek" class="eventWeek"></p>
        </div>
    </div>
    <div id="dayThreeEvents" class="eventContainers">
        <div id="dayThreeHeader" class="eventHeaders">
            <p id="dayThreeDay" class="eventDay"></p>
            <p id="dayThreeWeek" class="eventWeek"></p>
        </div>
    </div>
    <div id="dayFourEvents" class="eventContainers">
        <div id="dayFourHeader" class="eventHeaders">
            <p id="dayFourDay" class="eventDay"></p>
            <p id="dayFourWeek" class="eventWeek"></p>
        </div>
    </div>
    <div id="dayFiveEvents" class="eventContainers">
        <div id="dayFiveHeader" class="eventHeaders">
            <p id="dayFiveDay" class="eventDay"></p>
            <p id="dayFiveWeek" class="eventWeek"></p>
        </div>
    </div>
</div>

relevant jquery

    $('#searchResultsContainer').on({
        mouseenter: function () {
            $(this).css("background-color", "rgba(0,255,0,0.3)");
        },
        mouseleave: function () {
            $(this).css("background-color", "transparent");
        },
        click: function () {
            $.post("getClassEvents.php", {
                    id: $(this).attr("id")
                },
                function (data) {
                    alert(data);
                    $(".eventHeaders > p").text("");
                    $(".eventContainers > div:not(.eventHeaders) ").children().remove();
                    var dateDays = data.split("@")[0].split(",");
                    var resultsContainer = $(".eventHeaders").first();
                    for (var i = 0; i < 4; i++) {
                        resultsContainer.find(".eventDay").text(dateDays[i].split(".")[0]);
                        resultsContainer.find(".eventWeek").text(dateDays[i].split(".")[1]);
                        resultsContainer = resultsContainer.next();
                    }

                });
        }
    }, " div");

Upvotes: 1

Views: 59

Answers (3)

3dgoo
3dgoo

Reputation: 15794

.eventHeaders does not have any siblings in the DOM. It is the only element inside it's parent at that level.

Instead set your resultsContainer to .eventContainers, as that has the siblings you are after.

var resultsContainer = $(".eventContainers").first();
for (var i = 0; i < 4; i++) {
    resultsContainer.find(".eventDay").text(dateDays[i].split(".")[0]);
    resultsContainer.find(".eventWeek").text(dateDays[i].split(".")[1]);
    resultsContainer = resultsContainer.next();
}

Edit

Or you could use the jquery .each() function to do this in a much neater way:

$(".eventHeaders").each(function (index) {
    $(this).find(".eventDay").text(dateDays[index].split(".")[0]);
    $(this).find(".eventWeek").text(dateDays[index].split(".")[1]);
});

Upvotes: 2

Nicholas Hazel
Nicholas Hazel

Reputation: 3750

Well, you are targeting .eventHeaders as your resultsContainer.

.next() is used when objects are on the same plane (siblings).

Try targeting .eventContainers instead.

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

Your resultsContainer is populated by $(".eventHeaders") and that is a sibling of the .eventContainers

So since you want to go to the next .eventContainers element you should populate it with

var resultsContainer = $(".eventContainers").first();

If you look at the docs you will see that .next() works with siblings (and siblings mean elements that share the same parent)

Upvotes: 2

Related Questions