javascript - jQuery - 根据子容器的内容向父容器添加类

Question

我想根据子容器的内容向外部(父)容器添加一个类。我可以根据子容器的内容将类添加到子容器，但是如果我尝试将类添加到父容器，它将对页面上的所有容器执行此操作，而不仅仅是当前容器。有人可以帮我更新我的代码，以便它只将类添加到父容器中，而不是共享同一类的所有容器中吗？谢谢。

jQuery:

$('div.promotion-type').each(function () {
    var promotion = $(this).html();
    console.log(promotion);
    if (promotion === "Special Event") {
        $("div.calendar-event").addClass("special-event"); // this is the only one with a class created for it so far
    } else if (promotion === "Daily Promotion") {
        $("div.calendar-event").addClass("daily-promotion");
    }
});

HTML:(许多容器之一)

<li class="hidden-xs col-sm-6 col-md-4">
  <div class="calendar-event">
    <div class="event-details-container">
      <div class=" col-xs-4 calendar-thumbnail">
      <a href="/warroad-calendar/canadian-day">
        <img src="/_images/warroad/calendar/may-june-2014/canadianDay.jpg" border="0" alt="" />
      </a>
      </div>
      <h3><a href="/warroad-calendar/canadian-day">Canadian Day</a></h3>
      <h4>8 a.m. - 6 p.m.</h4>
      <strong></strong><br />
      <div class="hidden-xs hidden-sm hidden-md hidden-lg promotion-type">Daily Promotion</div>
    </div>
  </div>
</li>

Answer 1

更改此:

$("div.calendar-event").addClass("special-event");

对此:

$(this).parents("div.calendar-event").addClass("special-event");

看来您已经知道，使用选择器 $("div.calendar-event")将选择全部 <div>具有类 calendar-event 的元素。

通过使用 $(this).parents("div.calendar-event") ，你要查看起始 <li> 的所有 parent 元素，从最近的父元素开始并向外进行。当它找到 <div> 的父级时具有类 calendar-event 的元素，它将调用 .addClass()在该父元素上。