将.css()添加到前置div

Question

这个prepend函数添加了一个div"colorBox"类,但是我在设置新创建的css方面遇到了麻烦div.我不知道我的语法是否正确,但我正在尝试使用data-backgroundparent (li)标记中的值.

我正在使用它来添加颜色框multiselect options,并且我正在使用的插件将每个转换option为一个<li>结构类似于我在下面包含的HTML.

JS

$(function(){
    $("li span").prepend('<div class="colorBox"></div>').css('background-color', $(this).parent().attr("data-background"));   
});

HTML

<ul>
    <li data-background="#C11B17">
        <input type="checkbox" name="color[]" value="Brick_Red">
        <span>Brick Red</span>
    </li>
</ul>

Answer 1

尝试将代码分解一下.它失败了,因为.css()它实际上是在父节点上调用的,并且在你的上下文this中指的是window它.

的jsfiddle

$(function(){
    // Get all elements matching selector 'li span'
    var spans = $("li span");
    // Loop for each element in spans
    spans.each(function () {
        // Create the new element as a jQuery object
        var elem = $('<div class="colorBox">test</div>');
        // Set the new element's background-color to the attribute on the parent
        // of the span
        elem.css('background-color', $(this).parent().attr("data-background"));
        // Prepend the new element to the span (insert it as the first child)
        $(this).prepend(elem);
    });
});

如果你的意思是在其中包装"Brick Red",div你将需要使用.wrap()或.wrapInner().

的jsfiddle

$(this).wrap(elem);

更新

如果您正在使用自定义复选框,我建议采用更加css驱动的方法来利用<label>标签.

的jsfiddle

HTML

<ul>
    <li data-background="#C11B17">
        <input type="checkbox" name="color[]" value="Brick_Red" id="checkbox1" />
        <label for="checkbox1">
            <span>Brick Red</span>
        </label>
    </li>
</ul>

CSS

input[type=checkbox] {
    display:none;
}

input[type=checkbox] + label:before {
    display:inline-block;
    content:"";
    width:1em;
    height:1em;
    background-color:#CCC;
}

input[type=checkbox]:checked + label:before {
    background-color:#C11B17;
}

请注意,此方法可在IE8 +中使用,无需任何polyfill.