这个prepend函数添加了一个带有“colorBox”类的div ,但是我在设置新创建的div的css时遇到了麻烦。 我不知道我的语法是否正确,但我正在尝试使用父li标记中的data-background值。

我正在使用它来为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>

===============>>#1 票数: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包含“Brick Red”,那么你需要使用.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。

===============>>#2 票数:4

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

var color = $('li').attr('data-background');
$("span").prepend('<div class="colorBox" style="background:' + color + '"></div>');

===============>>#3 票数: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"));   
});

  ask by Chaya Cooper translate from so

未解决问题?本站智能推荐:

2回复

如果类内容的值小于10,则将:: content之前的:: content添加到CSS类

我试图在屏幕快照中将小于10的天数的值前面(我认为这是要使用的正确单词)添加为“ 0”: 当前课程和相关项目的屏幕截图 我具有CSS的基本结构,可以添加前面的“ 0”值,但是我只是不知道如何在值小于10时添加它。如您所见,我已成功将其添加到整个类中,但它也增加了我不希望的“ 11”值
6回复

可以动画jQuery前置?

我在按钮点击时将一些数据添加到我的页面,而不是立即在页面上填充,我想知道是否有一种方法可以使用slideToggle或CSS动画为prepend()设置动画。 这是我目前的脚本: 和JSFiddle
5回复

如何在jquery中添加一个类

当我点击它时,我想在盒子上添加具有相同设计的新div! 但是我可以点击它,然后它就像我希望的那样出现新的div,但我想在当时添加一个不超过一个。 我的意思是如果我点击一次,一个新的div应该出现,如果我再次点击1应该出现一个新的div。 但是当我多次点击它会增加不止一个! 为什么?
1回复

在“价格”更改后,如何将此附加的DIV保留在原位?

我正在根据我的旧工作开发的定制CMS设计此网站: http://dev544.webdugout.com/View/Snow-Removal 为了将price div“ productPrice”移到页面底部,我使用了以下命令: 我还使用以下内容在数字价格前面添加了文本:
2回复

简单脚本无法与jQuery中的.prepend()和.css()方法一起使用

今天,我遇到了一件我不太了解的有趣事情。 这个(见下文)非常简单的jQuery脚本不起作用,如果蓝色== true(这是真的),基本上我想将前置div的背景色更改为红色。 但是当我改变这一行: 对此: 该脚本有效。 工作演示: http : //jsfiddle.
1回复

jQuery prependTo添加display:block

似乎无法找到答案。 我的代码如下所示: 当带有图像的div放在LI它会向div添加style:display-block 。 我如何做到这一点,以使前置div不会添加style元素,因为display: inline-block该元素的class是display: inline-
1回复

未显示添加图像前置

我是Javascript / jQUERY的新手。 我使用load()从URL加载div。然后我想在span的左侧插入一个图像。 我正在使用prepend,但图像未加载。从控制台运行代码时,图像已正确加载。 $(document).ready(function() { var
2回复

JQUERY使用动画将LI预先添加到UL

我有一个UL,我正在努力通过一些动画动态地将新的LI添加到UL的顶部。 到目前为止,我有以下工作正常: #container是UL 上面的问题是隐藏整个UL,然后将整个UL向下滑动,我只想要预先设置动画的新LI。 想法? thxs
2回复

Angularjs:如何将图层添加到外部模板中?

我可以在前面加上一个元素的模板? 例如,这是我当前的代码,它显示和隐藏spnner div, controller.js, template.html, 在我看来,这并不理想。 当你有很多模板并且想要在填充之前有一个微调器时,这是相当繁琐的。 这将是更好移动<
1回复

将添加的记录添加到结果表一次

我正在使用jQuery Ui Dialog将记录添加到记录列表中。 它可以工作,但是我只想一次将新添加的记录行(tr)放在结果页的前面。 它可以工作,但很奇怪,append和prepend以及类似的函数都对每个元素执行此操作。 我只希望添加的记录一次添加。 我尝试了很多事情,包括: