CSS:仅将样式应用于两个类的组合,但不应用其他类

时间:2013-01-30 14:47:04

标签: jquery css

以下是我用来注入一个需要应用于Div的样式,它包含这两种样式的组合: .noindex .ms-wpContentDivSpace

<script>
$(document).ready(function(){
$('.noindex, .ms-wpContentDivSpace')..css({
   overflow: auto,
   height : '150px'
});
});
</script>



<style> 
    .autoScrolListViewWP 
    {   
        HEIGHT: 150px; 
        OVERFLOW: auto 
    } 
</style>
<script> 
    $(document).ready
    (
        function()
        { 
            $('.noindex, .ms-wpContentDivSpace').addClass('autoScrolListViewWP');
        }
    );
</script>

但是我需要的是,上面的新CSS autoScrolListViewWP 应该只添加到那些css组合只适用于这两个类 .noindex 的元素.MS-wpContentDivSpace

但是上面的脚本会将样式应用于这两个类存在的任何css组合。例如。 .ms-WPBody .noindex ms-wpContentDivSpace autoScrolListViewWP

我的问题是我如何识别CSS类的特定组合?

5 个答案:

答案 0 :(得分:1)

编辑我之前的代码:

$("[class*='.noindex .ms-wpContentDivSpace']").addClass('autoScrolListViewWP');

这应该有用。

编辑:有效,请参阅示例: JsFiddle

答案 1 :(得分:1)

解决方案是获取具有两个类的所有元素,然后遍历它们并查看它们是否具有其他类。即:

$('.noindex.ms-wpContentDivSpace').each(function(i, elem) {
    var classes = elem.className.split(/\s+/);
    if (classes.length === 2) { // they should have only these two classes
        $(elem).addClass('autoScrolListViewWP');
        // alternatively elem.className += ' autoScrolListViewWP'; (untested)
    }
});

答案 2 :(得分:0)

拿出空间。

$('.noindex.ms-wpContentDivSpace').addClass('autoScrolListViewWP');

这只会将类添加到同时具有类noindexms-ContentDivSpace的元素。

是的,jQuery非常聪明。这就像使用CSS一样。

修改

我没有意识到你想要选择元素,如果它 那两个类但没有其他类。这有点棘手。

如果您知道不想包含哪个课程,那么这是最简单(也是最快)的方式:

$('.noindex.ms-wpContentDivSpace').not('.theClassYouDontWant').addClass('autoScrolListViewWP');

答案 3 :(得分:0)

$('.noindex.ms-wpContentDivSpace').addClass('autoScrolListViewWP');

这是具有两个类

的元素的标准css触发器

答案 4 :(得分:-2)

在你的jQuery调用中,

$('.noindex, .ms-wpContentDivSpace')..css({

表示.noindex和.ms-wpContentDivSpace

中的每一个
$('.noindex.ms-wpContentDivSpace')..css({

表示.noindex AND .ms-wpContentDivSpace