如何将jQuery函数应用于具有相同类的所有元素。

时间:2014-11-19 20:07:06

标签: javascript jquery html

JQuery返回所有同名类的值= 2.53(应用于所有Span的第一个元素值)

如何获得不同的值?

(编辑:) HTML代码:

<div class='ratingInfo'>
    <table class='rating_table' border='0' cellpadding='0' cellspacing='0'>
      <tbody>
        <tr>
          <td>
             <div class='review-rating'>10</div>
          </td>
          <td>
             <div class='stars1'></div>
          </td>
        </tr>
      </tbody>
    </table>
</div>


<div class='ratingInfo'>
    <table class='rating_table' border='0' cellpadding='0' cellspacing='0'>
       <tbody>
          <tr>
            <td>
                <div class='review-rating'>1</div>
            </td>
            <td>
              <div class='stars1'></div>
            </td>
          </tr>
        </tbody>
     </table>
 </div>

的JavaScript

 $( document ).ready(function() {
    $( ".stars1" ).html("<span class='stars'>"+$('.review-rating').text()+"</span>");
    $('span.stars').stars();
 });

 $.fn.stars = function() {
    return $(this).each(function() {
        $(this).html($('<span />').width(Math.max(0, (Math.min(5,   parseFloat($(this).html())))) * 16));
    });
 }

1 个答案:

答案 0 :(得分:2)

因为$('.review-rating').text()每次抓取第一个元素,所以它不知道你想要元素旁边的元素。你需要编码才能看到它。

$( ".stars1" ).each( function () {
    var star = $(this);
    star.html("<span class='stars'>" + star.prev('.review-rating').text() + "</span>");
});

使用新的HTML代码,上面的内容将不起作用,因为元素不是兄弟姐妹。这就是拥有实际代码很重要的原因!您需要查找公共父级并在其中查找元素,在这种情况下,您具有包含两者的TR。因此,要获取父级,请使用nearest()

$( ".stars1" ).each( function () {
    var star = $(this);
    var rating = star.closest("tr").find(".review-rating").text();
    star.html("<span class='stars'>" + rating + "</span>");
});