如何将<li>附加到<ul>并使用jquery同时在<li>上设置css </li> </ul> </li>

Question

以下设置我<ul>追加的<li>上的颜色。我想要设置所附加<li>的颜色：

$('.test').append(
    '<li class="asdf" data-blerg="ssdkf">TESTESETSETSERT</li>').css('color', 'blue');

jsfiddle

Answer 1

您可以使用.appendTo()尝试此操作：

$('<li class="asdf" data-blerg="ssdkf">TESTESETSETSERT</li>')
   .css('color', 'blue').appendTo('.test');

Demo.

你也可以像这样继续使用append()：

$('.test').append($('<li class="asdf" data-blerg="ssdkf">TESTESETSETSERT</li>')
                .css('color', 'blue'));

Answer 2

您可以像以下一样使用它：

var el = $('<li class="asdf" data-blerg="ssdkf">TESTESETSETSERT</li>');
$('.test').append($(el).css('color', 'blue'));

<强> Demo

Answer 3

我更喜欢这种方式，因为如果你想添加多个元素属性，我觉得它有点整洁，我认为它也会触及dom。

var listItem = $('<li/>', {
    html: 'TESTESETSETSERT',
    class : 'asdf',
    'data-blerg' : 'ssdkf'
});
$('.test').append(listItem);

此处示例 http://jsfiddle.net/7rQwn/3/

Answer 4

如果添加新元素，则这是DOM的最后一个子元素。方法追加返回容器，你需要得到它们childrem，得到最后一个孩子和appl你css

$('.test').append(
    '<li class="asdf" data-blerg="ssdkf">TESTESETSETSERT</li>').children().last().css('color', 'blue');

http://jsfiddle.net/D3EgK/1/