jQuery遍历每个div ID

Question

我正在尝试使用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。如何遍历每个div ID？

Answer 1

首先， ID在编程世界中应该是唯一的。 无论如何，您应该将标记更改为使用类而不是ID。 看到：

<div class="rate">800</div>

然后，您可以使用jquery获取该div中的文本：

$('.rate').each(function(){
    var textValue = this.text();
    // anything you want to do here.
});

注意 ： this是指循环内的当前jquery对象。

Answer 2

更换：

$('.rate').each(function( index ){
    var value = document.getElementById("rate").value;
    // ...
});

与：

$('.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");
         }
     });
 });

这是一个工作的小提琴