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>元素的所有父项，从最近的父项开始向外进展。当它找到具有类<div>的{{1}}元素的父级时，它将在该父元素上调用calendar-event。

Answer 2

问题在于您正在进行新选择而不是使用当前元素。尝试...

$(this).parent().parent().addClass(...);

......或者可能......

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

...来代替。

Answer 3

而不是这个 -

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

试试这个：

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

Answer 4

使用text（）代替html（）
首先删除课程
使用$（this）

代码：

$('div.promotion-type').each(function () {
    var promotion = $(this).text();
    console.log(promotion);

    $(this).parent().removeClass("special-event");
    $(this).parent().removeClass("daily-promotion");

    $(this).parent().addClass(
           promotion === "Special Event" ? 'special-event': 'daily-promotion');

});

jQuery - 根据子容器的内容将类添加到父容器

4 个答案: