在具有不同值但具有相同类名

Question

我要做的是运行一个jQuery函数，将数字分数转换为条形评级系统，使用分数作为百分比来设置条形的宽度。使用XSL从XML动态生成div s和div内部的分数。

问题在于该功能正在从第一个DIV获取分数并将其应用于所有后续DIV，而不是分别从每个DIV中获取分数。作为参考，.Product_Rating_Score_Overall是得分，.ratingBar是得分栏背后的灰色背景，.ratingOverall是绿色条，其宽度经过调整以反映得分百分比。这是我的评级系统的图像（你可以看到第一个DIV的2.0的等级被转移到其他DIV。其他DIV的评级应该如下7.0 6.0,6.0,6.0-这些只是假的现在得分）：

这是我的HTML代码：

<div id="F26_ResultsDiv" style="display:none">
  <div class="items"><div class="ColOne">
    <div class="item">
      <div class="otherStuff">
        <span>Kindermat Basic Red/Blue</span>
          <div class="overall"><span><span class="content">
           <ul>
            <li class="Product_Rating_Score_Overall">2.00</li>
           </ul>
        </span></span>
      <div class="ratingBar">
    <div class="ratingOverall"> 
</div></div></div></div></div>

这是我的jQuery代码：

  $('.overall').each( function() {
       var score = parseFloat($('.Product_Rating_Score_Overall').text()).toFixed(1);
       console.log(score);
        var scorePerc = score * 10;
        $('.ratingOverall').width(scorePerc + '%');
        $('.Product_Rating_Score_Overall').text(score);
    });

非常感谢任何帮助。非常感谢。

Answer 1

您需要本地化您的选择器：

$('.overall').each( function() {
   var score = parseFloat($(this).find('.Product_Rating_Score_Overall').text()).toFixed(1);
   console.log(score);
    var scorePerc = score * 10;
    $(this).find('.ratingOverall').width(scorePerc + '%');
    $(this).find('.Product_Rating_Score_Overall').text(score);
});

更新：添加小提琴https://jsfiddle.net/mbho2bjj/5/

Answer 2

使用 $（this）和 find（）功能。

对于每个元素 class ，您可以在其下找到类 Product_Rating_Score_Overall

的元素

$('.overall').each( function() {
   var score = parseFloat($(this).find('.Product_Rating_Score_Overall').text()).toFixed(1);
   console.log(score);
    var scorePerc = score * 10;
    $(this).find('.ratingOverall').width(scorePerc + '%');
    $(this).find('.Product_Rating_Score_Overall').text(score);
});

Answer 3

问题出在第二行，其他引用是全局的，没有正确本地化。您应该更改它以获取本地值，而不是每次出现在全局范围内的第一个值，这就是您获得现在看到的功能的原因。现在你认为它不起作用，但它的工作方式正如它所写的那样。通过调整代码以对每个'.overall'内的局部变量进行操作，我们将获得您正在寻找的正确结果。

尝试更改这样的代码：

$('.overall').each( function() {
   var score = parseFloat($(this).find('.Product_Rating_Score_Overall').text()).toFixed(1);
   console.log(score);
    var scorePerc = score * 10;
    $(this).find('.ratingOverall').width(scorePerc + '%');
    $(this).find('.Product_Rating_Score_Overall').text(score);
});