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

Answer 2

resultsContainer填充了$(".eventHeaders")，这是[{1}}

的兄弟

因此，您希望转到下一个.eventContainers元素，您应该使用

填充它

.eventContainers

如果您查看文档，您会看到.next()与兄弟姐妹一起工作（和兄弟姐妹意味着共享同一父母的元素）

Answer 3

好吧，您将.eventHeaders定位为resultsContainer。

当.next()位于同一平面（objects）时，会使用

siblings。

尝试定位.eventContainers。

Jquery .next（）不起作用

3 个答案: