JQuery遍历每个div id

时间:2015-03-09 00:17:28

标签: javascript php jquery html css

我正在尝试使用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?

2 个答案:

答案 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