javascript - 根据容器的内容添加类

Question

我想根据 div 的文本内容向其添加一个类。然而我目前遇到的问题是有多个容器，因此同一个类被应用于所有容器。我很确定这个问题的解决方法是实现“this”的正确使用，也许还有一个循环遍历我正在寻找的类的每个元素，但我不确定如何实现它。

我有三种类型的文本内容:

应检查“特殊事件”并获取特殊事件类。

“每日促销”应获得每日促销类别。

激励类别应为“Players Club Incentive”。

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>

JS fiddle :

http://jsfiddle.net/Q8hju/

实时页面:

http://sevenclanscasino.designangler.com/warroad/warroad-calendar

Answer 1

有很多方法可以解决这个问题。

试试这个:

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

It works

另一种方法:

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

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

Demo