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. Это единственный элемент внутри его родителя на этом уровне.

Вместо этого укажите свои результатыКонтейнер .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") и это родственный .eventContainers

Так как вы хотите перейти к следующему .eventContainers элементу вы должны заполнить его с

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

---

Если вы посмотрите на документы, вы увидите, что .next() работает с братьями и сестрами (братья и сестры означают элементы, которые разделяют один и тот же родительский)

Answer 3

Ну, вы ориентируетесь на .eventHeaders как на ваш resultsContainer.

.next() Используется, когда objects находятся на одной плоскости (siblings).

Попробуйте настроить таргетинг .eventContainers.