Question

我们可以在css中选择以下内容

li[class^=navs]{/*css code here*}

但是如何在jquery中选择上面的内容

我试过但似乎错了：

$('li[class^=navs]').css(/*css code here*/);

尝试引用：

demo

更新

HTML

<div id="banner"></div>

jquery的

$(document).ready(function(){
$('#banner').prepend('<ul id="navs"></ul>');
for (var i = 1; i < 8; i++){
$('#navs').append('<li class="navs'+i+'"></li>');
}
$('li[class^="navs"]').css('width':'20px','height':'20px','background-color':'red');
});

updated demo

Answer 1

我相信你需要围绕价值的报价：

$('li[class^="navs"]').css(/*css code here*/);

从您的小提琴中，您设置CSS的行会占用一个对象：

$('li[class^="navs"]').css('width':'20px','height':'20px','background-color':'red');

应该是：

$('li[class^="navs"]').css({'width':'20px','height':'20px','background-color':'red'});

您使用的syntax仅在仅设置一个属性（.css(propertyName, value)）时才有效。

Answer 2

您没有使用正确的对象文字，您需要在{}中包装您的css属性。

$('li[class^="navs"]').css('width':'20px','height':'20px','background-color':'red');

应该是：

$('li[class^="navs"]').css({'width':'20px','height':'20px','background-color':'red'});
                           ^                                                       ^

如果您选择以合理的方式格式化代码，这将更加明显。

updated fiddle

_{这解决了问题原始版本中的问题。}

两种格式都应该包含值的引号，浏览器可能支持类似的语法以获得更好的兼容性，但jQuery不支持：

$('li[class^="navs"]')

另一个重要的注意事项是，您不应该依赖DOM节点上存在的类的顺序。 class="foo bar"相当于class="bar foo"。

Answer 3

$('li[class^="nav"]').css({color: 'pink'});

Fiddle

Answer 4

您需要将对象作为参数传递给.css()

$('li[class^="navs"]').css({
    'width': '20px',
    'height': '20px',
    'background-color': 'red'
});

演示：Fiddle

Answer 5

.css()文档

对于多个css，您必须使用.css({})

$('li[class^="navs"]').css({'width': '20px', 'height': '20px', 'background-color': 'red'});

DEMO

Answer 6

你有

$('li[class^="navs"]').css('width':'20px','height':'20px','background-color':'red');

应该是

$('li[class^="navs"]').css({
    'width':'20px',
    'height':'20px',
    'background-color':'red'
});

注意{}，如果您有多个css值而错过了{}但使用了:，则应该传递一个对象而不是字符串。 DEMO.

选择以jquery中的类开始，就像在CSS中一样

6 个答案: