Jquery .next() 不起作用

Question

我正在使用日期填充以下 html 结构，其中包括星期几和月份。第一个“天”按预期填充，但使用 .next() 我无法更改 resultsContainer 中的同级。有什么建议吗？

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

相关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");

Answer 1

.eventHeaders 在 DOM 中没有任何同级。它是该级别父级中唯一的元素。

相反，将 resultsContainer 设置为 .eventContainers，因为它包含您要查找的同级容器。

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();
}

编辑

或者你可以使用 jquery .each()函数以更简洁的方式执行此操作:

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