Question

Markup:
<ul>
  <li>
    <ul id="ratx">
      <li>Location</li>
      <li class="bar"><span></span></li>
      <li class="value">4</li>
    </ul>
  </li>
  <li>
    <ul id="ratx">
     <li>Hotel Services</li>
     <li class="bar"><span></span></li>
     <li class="value">5</li>
    </ul>
  </li>
  <li>
    <ul id="ratx">
      <li>Hotel Facilities</li>
      <li class="bar"><span></span></li>
      <li class="value">3</li>
    </ul>
  </li>
  <li>
    <ul id="ratx">
      <li>Room Cleanliness</li>
      <li class="bar"><span></span></li>
      <li class="value">4</li>
    </ul>
  </li>
  <li>
    <ul id="ratx">
      <li>Value for Money</li>
      <li class="bar"><span></span></li>
      <li class="value">1</li>
    </ul>
  </li>
</ul>

我想使用JQuery动态表示用户评级，所以我创建了一个这样的函数，

jQuery:
$("ul#ratx").each(function(index) {
var val = $(this).children(".value").text();
var barval = val * 40;

/* compute ratings */ 
$("li.bar span").css("width", barval);

});

现在，当我提醒 barval 时，我得到所有5个值，但是当我尝试应用“计算评级”行时，它所做的就是应用它找到的最后一个值。我该怎么办呢？

很抱歉，如果这个问题令人困惑。我不太清楚如何说出一切。

Answer 1

问题是，在通过它找到的每个元素进行交互时，它会为所有li.bar span应用一个公共值。您应该代表一个单独的元素，您正试图申请。

~~$（this）.children（“li.bar span”）。css（“width”，barval）;~~

更新

Here是一个有效的演示

有效的代码片段是

$(this).find("li.bar").children("span").css("width", barVal );

另外，我将范围的显示属性更改为display: inline-block;

Answer 2

您要为集$("li.bar span")中的所有元素设置css。所以最后，它们都具有与最后解析值相同的宽度。

虽然没有看到你的标记，但很难为你提出代码解决方案。

如何正确应用从.each（）养殖的值

2 个答案:

更新