这个prepend
函数添加了一个带有“colorBox”类的div
,但是我在设置新创建的div
的css时遇到了问题。我不知道我的语法是否正确,但我正在尝试使用父(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>
答案 0 :(得分:6)
尝试将代码分割一下。这是失败的,因为.css()
实际上是在父级上调用的,而this
在您的上下文中是指window
。
$(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
中打包“Brick Red”,则需要使用.wrap()
或.wrapInner()
。
$(this).wrap(elem);
如果您使用自定义复选框,我建议采用更加css驱动的方法,利用<label>
标记。
<强> 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 +,无需任何填充。
答案 1 :(得分:4)
如果您要使用.css()而不是css,那么为什么不使用样式设置呢?
var color = $('li').attr('data-background');
$("span").prepend('<div class="colorBox" style="background:' + color + '"></div>');
答案 2 :(得分:0)
在jQuery中,这个这个词是关于链中的最后一个对象。在你的例子中,$(&#34; li span&#34;)是最后一个对象,所以当你使用&#39;这个&#39;它说的是关于$(&#34; li span&#34;)。 为避免这种情况,您只需使用prependTo即可。这应该可以解决问题:
jQuery(function(){
jQuery('<div class="colorBox"></div>').prependTo(jQuery('#aaaa')).css(
'background-color',jQuery(this).parent().attr("data-background"));
});