分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – .each()没有针对正确的元素，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我在使用jQuery来定位正确的div时遇到了一些麻烦.我正在创建一个水平条形图小部件,并且我希望值标签在小于10％时(因为可读性)碰到条形图的右侧.

看起来我没有正确地定位barValue div,因为它没有像它应该的那样碰撞< 10％的值. HERE’S A FIDDLE.

$(function() {
    $(".barChart").each(function() {
        $(this).html("<div class='barLabel'>" 
            + $(this).data('title') + 
        "</div><div class='barContainer'><div class='bar' style='width:" 
            + $(this).data('value') + 
        "%'><div class='barValue'>" 
            + $(this).data('value') + "%" 
            + "</div></div></div>");
        if($(this).data('value') <= 10) {
            $(this,".barContainer .barValue").css({
                "margin-right": "-20px","color": "#000",});
        }
    });
});

<div class="barChart" data-value="64" data-title="Apples"></div>
<div class="barChart" data-value="6" data-title="Oranges"></div>

.barChart {
    width:100%;
    margin:5px;
}
    .barChart .barLabel {
        float:left;
        font-size:12px;
        color:#BBB;
    }
    .barChart .barContainer {
        width:-webkit-calc(100%-85);    
        margin-left:75px;

        -moz-Box-sizing: border-Box; 
        -webkit-Box-sizing: border-Box;
        Box-sizing: border-Box;
        height:15px;
        padding:1px;
        border:1px solid #EEE;
    }
    .bar {
        -moz-Box-sizing: border-Box; 
        -webkit-Box-sizing: border-Box;
        Box-sizing: border-Box;
        height:100%;

        border:1px solid #FF0000;
        BACkground: #CC0000; /* Old browsers */
        BACkground: -moz-linear-gradient(top,#FF0000 0%,#CC0000 100%); /* FF3.6+ */
        BACkground: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#FF0000),color-stop(100%,#CC0000)); /* Chrome,Safari4+ */
        BACkground: -webkit-linear-gradient(top,#CC0000 100%); /* Chrome10+,Safari5.1+ */
        BACkground: -o-linear-gradient(top,#CC0000 100%); /* Opera 11.10+ */
        BACkground: -ms-linear-gradient(top,#CC0000 100%); /* IE10+ */
        BACkground: linear-gradient(to bottom,#CC0000 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF0000',endColorstr='#CC0000',GradientType=0 ); /* IE6-9 */
    }
    .barValue {
        float:right;
        margin-top:-2px;
        font-size:10px;
        color:#FFF;
    }