.each() not targeting the right element(s)

Question

I'm having a bit of trouble getting my jQuery to target the right divs. I'm creating a horizontal bar chart widget, and I want the value label to bump to the right of the bar when it's less than 10% (for readability).

It looks like I'm not targeting the barValue div correctly, because it's not bumping the <10% values over like it should.

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, #FF0000 0%, #CC0000 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #FF0000 0%, #CC0000 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #FF0000 0%, #CC0000 100%); /* IE10+ */
        background: linear-gradient(to bottom, #FF0000 0%, #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;
    }

Answer 1

You have your parameters backwards here:

$(this, ".barContainer .barValue")

Should be

$(".barContainer .barValue", this)

The first parameter is the selector, the 2nd is the context.

http://jsfiddle.net/pYmbP/3/