我正在尝试使用jquery循环遍历id =“rate”的每个div标签。然后jquery会在单独的div上执行函数。这是我的代码:
在info.html
<html>
<input class="rate" type="hidden" value="<?php echo $rate;?>" /></p>
<div class='rating_bar'>
<!-- div element that contains full stars with percentage width,
which represents rating -->
<div class="rating" style='width:40%;'>
</div>
</div>
</html>
rate.js
$(document).ready(function() {
$('.rate').each(function( index ){
var value = this.value;
if(value >= 0 && value <= 5)
{
value = Math.round((value/5)*100);
$('.rating').each(function(){
$(this).width(value + '%');
}
}}
else
{
alert("Incorrect value, rating must be between 0 and 5");
}
});
});
的style.css
.rating_bar {
width: 150px;
height: 40px;
background: url(../images/rate-btn2.png);
background-repeat: repeat-x;
background-position: 0 0;
text-align: left;
}
.rating {
height: 40px;
background: url(../images/rate-btn2-hover.png);
background-position: 0 -1px;
background-repeat: repeat-x;
}
问题:
我所拥有的是具有div id =“rate”的多个隐藏文本框。 jquery只影响第一个div id.how循环遍历每个div id?
答案 0 :(得分:0)
首先,ID
应该在编程世界中独一无二。无论如何,您应该更改标记以使用类而不是ID。参见:
<div class="rate">800</div>
然后你可以使用jquery来获取div中的文本:
$('.rate').each(function(){
var textValue = this.text();
// anything you want to do here.
});
注意:this
引用循环内的当前jquery对象。
答案 1 :(得分:0)
替换:
$('.rate').each(function( index ){
var value = document.getElementById("rate").value;
// ...
});
with:
$('.rate').each(function( index ){
var value = this.value;
// ...
});
获取您正在迭代的input
元素的值。
编辑。根据您的评论,您需要将第n个 div.rating
与第n个 input.rate
的值相关联。为此,我们可以使用jQuery的.eq
函数来获取元素数组的第n个子元素。请参阅以下代码:
$(document).ready(function () {
$('.rate').each(function (index) {
var value = this.value;
if (value >= 0 && value <= 5) {
value = Math.round((value / 5) * 100);
$('.rating').eq(index).width(value + '%');
// ^^^
// We get the corresponding .rating element
} else {
alert("Incorrect value, rating must be between 0 and 5");
}
});
});
这是一个working fiddle