5

这个prepend函数添加了一个div“colorBox”类，但是我在为新创建的div. 我不知道我的语法是否完全正确，但我正在尝试使用data-background父( 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>
4

3 回答 3

6

尝试将您的代码拆分一下。它失败了，因为.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);
    });
});

如果您打算将“砖红色”包裹在 中，div那么您将需要使用.wrap()or .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。

于 2013-04-16T03:14:53.207 回答
4

如果您要使用 .css() 而不是 css，那么为什么不使用样式设置它呢？

var color = $('li').attr('data-background');
$("span").prepend('<div class="colorBox" style="background:' + color + '"></div>');
于 2013-04-16T03:22:15.027 回答
0

在 jQuery 中，这个词是关于链中的最后一个对象。在您的示例中，$("li span") 是最后一个对象，因此当您使用“this”这个词时，它大约是 $("li span")。为避免这种情况，您可以简单地使用 prependTo 代替。这应该可以解决问题：

jQuery(function(){
  jQuery('<div class="colorBox"></div>').prependTo(jQuery('#aaaa')).css(
  'background-color',jQuery(this).parent().attr("data-background"));   
});
于 2014-12-11T18:04:24.980 回答