jQuery .next（）无法正常工作

Craig Lafferty 发表于 Dev

克雷格·拉菲蒂

我正在用以下日期填充以下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");

3dgoo

.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]);
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。