Javascript 根据容器的内容添加类

我想根据div的文本内容向其添加一个类。然而，我目前面临的问题是，存在多个容器，因此同一个类将应用于所有容器。我很确定解决这个问题的方法是实现“this”的正确用法，可能是通过我要查找的类遍历每个元素的循环，但我不确定如何实现

我有三种文本内容：

应检查“特殊事件”，并获得特殊事件类

“每日促销”应参加每日促销课程

“球员俱乐部激励”应为激励类

var promotion = $("div.promotion-type").html();

if(promotion === "Special Event"){
    $("div.promotion-type").addClass("special-event");
}
else if(promotion === "Daily Promotion"){
    $("div.promotion-type").addClass("daily-promotion");
}
else if(promotion === "Players Club Incentive"){
    $("div.promotion-type").addClass("incentive");
}

我理解这是错误的。它检查内容，然后将类添加到所有内容中。不是我想要的。我只希望它检查单个容器，然后根据内容添加适当的类

其中一个事件的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>

上午8时至下午6时。


每日促销

JS小提琴：

实时页面：

---

解决这个问题有很多方法

试试这个：

$("div:contains('Special Events')").addClass('special-events');
$("div:contains('Daily Promotion')").addClass('daily-promotion');
$("div:contains('Players Club Incentive')").addClass('incentive');

var highlights = {
    "Special Events": "special-events",
    "Daily Promotion": "daily-promotion",
    "Players Club Incentive": "incentive"    
}

$("div.promotion-type").each(function() {
    $(this).addClass(highlights[$(this).html()]);
});

另一种方法：

$("div:contains('Special Events')").addClass('special-events');
$("div:contains('Daily Promotion')").addClass('daily-promotion');
$("div:contains('Players Club Incentive')").addClass('incentive');

var highlights = {
    "Special Events": "special-events",
    "Daily Promotion": "daily-promotion",
    "Players Club Incentive": "incentive"    
}

$("div.promotion-type").each(function() {
    $(this).addClass(highlights[$(this).html()]);
});

你可以做一个循环

---

你可以这样循环-

---

martynas的答案应该有用。我怀疑这个方法实际上会执行得更快，因为你做的查找更少

$("div.promotion-type").each(function(i){

  var $el = $(this),
      promotion = $el.text();

  if(promotion === "Special Event"){

    $el.addClass("special-event");
  }else if(promotion === "Daily Promotion"){

    $el.addClass("daily-promotion");
  }else if(promotion === "Players Club Incentive"){

    $el.addClass("incentive");
  }
});

---

它适用于第一个div，但之后不会将任何类添加到上的其余容器中。有没有办法纠正这种情况？谢谢。因为文本不匹配，所以不起作用。您参加了

特别活动

，而不是

特别活动

。看看我更新的演示。很高兴我能帮上忙。祝你好运如果有更多的“类型”，你将进行大量的迭代，每个“类型”一个。…@edispring是的，这是真的。我的解决方案肯定不是很好，但是非常简单。感谢您在我的原始代码的基础上为我提供了另一种解决方案。请小心使用

html（）

来提取文本。