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个值,但是当我尝试应用“计算评级”行时,它所做的就是应用它找到的最后一个值。我该怎么办呢?
很抱歉,如果这个问题令人困惑。我不太清楚如何说出一切。
答案 0 :(得分: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;
答案 1 :(得分:0)
您要为集$("li.bar span")
中的所有元素设置css。所以最后,它们都具有与最后解析值相同的宽度。
虽然没有看到你的标记,但很难为你提出代码解决方案。