Question

很抱歉这个新问题，我很长时间没有编码，并试图帮助朋友。他的网站从API反馈，因此他无法控制格式，以下HTML：

<div class="storeList">
<span class="newStore">W5 5RN</span>
<span class="nearestStore">HARLESDEN<span class="mileage"><span class="mileCount">4</span> miles</span></span>
<span class="nearestStore">BURNT OAK<span class="mileage"><span class="mileCount">9</span> miles</span></span>
<span class="nearestStore">EDGEWARE<span class="mileage"><span class="mileCount">11</span> miles</span></span>
<span class="nearestStore">UXBRIDGE<span class="mileage"><span class="mileCount">12</span> miles</span></span>
<span class="nearestStore">NEW MALDEN<span class="mileage"><span class="mileCount">12</span> miles</span></span>
</div>
<div class="storeList">
<span class="newStore">W6 8RN</span>
<span class="nearestStore">HARLESDEN<span class="mileage"><span class="mileCount">2</span> miles</span></span>
<span class="nearestStore">BURNT OAK<span class="mileage"><span class="mileCount">5</span> miles</span></span>
<span class="nearestStore">EDGEWARE<span class="mileage"><span class="mileCount">7</span> miles</span></span>
<span class="nearestStore">UXBRIDGE<span class="mileage"><span class="mileCount">14</span> miles</span></span>
<span class="nearestStore">NEW MALDEN<span class="mileage"><span class="mileCount">16</span> miles</span></span>
</div>

我尝试做的是在API显示数据之后，使用类.storeList循环遍历每个结果，并检查＆lt; mileCount＆＃39;的每个子元素。并使用jQuery向.nearestStore的父元素显示三种不同的背景颜色，具体取决于里程为0-3英里（红色），3-5英里（黄色）超过5英里（绿色）。

我知道我必须做每一个陈述，但从那里，我迷失了。任何帮助非常感谢。

Answer 1

这个怎么样？

＆＃13;

$('.mileCount').each(function() {
   var count = parseInt($(this).text());
   $(this).parents('.nearestStore').css('background-color', ((count > 5) ? 'green' : (count > 3) ? 'yellow': 'red'));
});

＆＃13;

<div class="storeList">
<span class="newStore">W5 5RN</span>
<span class="nearestStore">HARLESDEN<span class="mileage"><span class="mileCount">4</span> miles</span></span>
<span class="nearestStore">BURNT OAK<span class="mileage"><span class="mileCount">9</span> miles</span></span>
<span class="nearestStore">EDGEWARE<span class="mileage"><span class="mileCount">11</span> miles</span></span>
<span class="nearestStore">UXBRIDGE<span class="mileage"><span class="mileCount">12</span> miles</span></span>
<span class="nearestStore">NEW MALDEN<span class="mileage"><span class="mileCount">12</span> miles</span></span>
</div>
<div class="storeList">
<span class="newStore">W6 8RN</span>
<span class="nearestStore">HARLESDEN<span class="mileage"><span class="mileCount">2</span> miles</span></span>
<span class="nearestStore">BURNT OAK<span class="mileage"><span class="mileCount">5</span> miles</span></span>
<span class="nearestStore">EDGEWARE<span class="mileage"><span class="mileCount">7</span> miles</span></span>
<span class="nearestStore">UXBRIDGE<span class="mileage"><span class="mileCount">14</span> miles</span></span>
<span class="nearestStore">NEW MALDEN<span class="mileage"><span class="mileCount">16</span> miles</span></span>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

＆＃13;

编辑：我删除了不必要的东西......

Answer 2

这可能会对您有所帮助：

$('.mileCount').each(function() {
  var $this = $(this),
    miles = $this.text(),
    color;
  if (miles < 3) {
    color = 'red';
  } else if (miles >= 3 && miles <= 5) {
    color = 'yellow';
  } else if (miles > 5) {
    color = 'green';
  }

 $this.parents('.nearestStore').css('color', color);

});

循环显示包含里程的每个span，相应地设置颜色，然后更改父元素的颜色.nearestStore

Example

您还可以遍历.nearestStore并搜索子元素.mileCount获取文本并设置元素本身的颜色。

Answer 3

你需要添加这个js，

   $( ".mileCount" ).each(function( index ) {
  if(parseInt($(this).text())<='3')
    {     
       $(this).addClass('red');
    }else if(parseInt($(this).text())>'3' && parseInt($(this).text())<='5'){
      $(this).addClass('blue');
    }
    else{
      $(this).addClass('orange');
  }
});

这会为每个与您的代码匹配的范围添加一个类，此笔中的可用代码：

http://codepen.io/dragonclaw/pen/RooxMJ

希望它有所帮助。

根据HTML元素值更改父背景颜色

3 个答案: