0

我们可以在css中选择如下

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

但是我怎么能像上面那样在jquery中选择

我试过但似乎错了：

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

尝试使用引号：

演示

更新

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');
});

更新的演示

4

6 回答 6

4

我相信您需要围绕值的引号：

$('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'});

您使用的语法仅在仅设置一个属性 ( .css(propertyName, value)) 时有效。

于 2013-09-10T04:43:07.087 回答
2

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

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

应该：

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

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

更新的小提琴

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

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

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

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

于 2013-09-10T04:43:38.157 回答
2 
$('li[class^="nav"]').css({color: 'pink'});

小提琴

于 2013-09-10T04:46:35.447 回答
1

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

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

演示：小提琴

于 2013-09-10T04:52:18.350 回答
1

.css()文档

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

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

演示

于 2013-09-10T04:53:35.780 回答
1

你有

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

它应该是

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

请注意，当您有多个值并且您错过了but used{}时，您应该传递一个对象而不是字符串。 演示。css{}:

于 2013-09-10T04:56:49.580 回答