jQuery 循环遍历每个 div id答案

【问题标题】：JQuery loop through each div idjQuery 循环遍历每个 div id
【发布时间】：2015-03-09 00:17:27
【问题描述】：

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

【问题讨论】：

你不能有多个具有相同ID的div
使用类而不是 ID。这就是类的用途......多个实例
@DhirajBodicherla ，我已将 id 替换为 class，仍然无法正常工作:(
你把选择器改成类选择器了吗？
在each 部分中，您可以将document.getElementById("rate").value; 替换为$(this).val() 或this.value 以获取您正在迭代的输入的值。

标签： javascript php jquery html css

【解决方案1】：

替换：

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

与：

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

获取您正在迭代的input 元素的值。

编辑。根据您的 cmets，您需要将 n-th div.rating 与 n-th 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

【讨论】：

谢谢，但似乎最后一个 div 的值用于其他。
所有 div 的值都相同
您的意思是所有'.rate' 元素的值都相同？
是的，我每次都得到相同的结果。将类型从“隐藏”更改为“文本”以确保该值正确。但是对于所有具有 div 类 'rate' 的值，我得到相同的结果
根据您的代码和更正，这是我所看到的一个小提琴：fiddle这是您得到的吗？

【解决方案2】：

首先IDs 在编程世界中应该是独一无二的。无论如何，您应该更改标记以使用类而不是 ID。见：

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

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

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

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

【讨论】：