不会增加跨度的宽度

Question

HTML

<div class="ratingInfo">
    <div class="review-rating">5.0 </div>
    <div class="stars1"></div>
</div>

<div class="ratingInfo">
    <div class="review-rating">4.0 </div>
    <div class="stars1"></div>
</div>

JQuery的

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

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

所有现金表现不同..

在html页头标记中添加JQuery时工作正常但是当我尝试添加Joomla时，自定义html根本不起作用..

当我尝试“ jsfiddle ”给我跨度但宽度超出时..

如何添加宽度范围。？

Jquery应该返回类似这样的内容

 "<span class="stars"><span style="width: 75.2px;"></span></span>"

Answer 1

span是内联元素，内联元素没有固定宽度。

因此，您的跨度需要将显示设置为阻止或内联阻止。

span.stars span { display: inline-block; }

其他问题是跨度内没有文字，因此无需显示任何内容。

---

＆＃13;

＆＃13;

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

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

＆＃13;

span.stars span {
  background-color: red;
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ratingInfo">
  <div class="review-rating">5.0</div>
  <div class="stars1"></div>
</div>

<div class="ratingInfo">
  <div class="review-rating">4.0</div>
  <div class="stars1"></div>
</div>

＆＃13;

＆＃13;

＆＃13;