jQuery：获取扩展某些类的css类的元素

我在css中为某些输入文本创建了一个类。我有两个班，从第一类扩展，像这样：jQuery：获取扩展某些类的css类的元素

.input-text-parent { 
     background-color: gray; 
    } 

    .input-text-child-1 { 
     extends: input-text-parent; 
     background-image: url(images/image1.jpg); 
    } 

    .input-text-child-2 { 
     extends: input-text-parent; 
     background-image: url(images/image2.jpg); 
    }

现在，我想要做的就是使用jQuery的所有扩展的第一类（输入文本的父元素来选择，在这个案例）。我知道用$（“。class”）可以获得该类的所有元素，但我不知道如何获取它的所有子类。

非常感谢。

我希望我是在我的解释不够清楚。

来源

2013-02-25 fleita

CSS中的'extends'属性不存在，因此什么都不做（除了可能会在验证器中产生错误）。这是少了还是SASS？ – 2013-02-25 19:09:01

但是，您可以使用两个类来处理复杂的元素，而不是扩展一个，这会很快解决问题。 – Mahn 2013-02-25 19:10:54

在CSS中没有子级别的层次结构，您不能选择以特定类名开头的所有元素。

但你可以：

选择与特定类的所有元素：

$('.input-text-parent').each(function(){ 
    //Do something 
});

或者选择特定的类

所有元素

$('.input-text-parent .input-text-parent-1').each(function(){ 
    //Do something 
});

来源

2013-02-25 19:12:45 sdespont

jQuery也没有什么特别内建为此，因为CSS没有真正的子类支持。这些“子类”中的每一个实际上都是完全独立的类，它们恰好具有相似的名称。

jQuery的filter方法与className物业组合应该能够一类input-text-child-n

$("input").filter(function(){ 
    return this.className.indexOf("input-text-child-") >= 0; 
}).doSomething();

来源

2013-02-25 19:13:35

我建议重构你的CSS使用两个类复杂的元素，而不是一个延伸到选择的元素另一个，除了不需要预处理外，它实际上完成了同样的事情。例如：

.input-text { 
    background-color: gray; 
} 

.input-text.child-1 { 
    background-image: url(images/image1.jpg); 
} 

.input-text.child-2 { 
    background-image: url(images/image2.jpg); 
}

然后，您可以使用下面的标记：

<div class="input-text"></div> 
<div class="input-text child-1"></div> 
<div class="input-text child-2"></div>

而且下面的JavaScript通过jQuery：

$(".input-text").stuff(); //Select all of them 
$(".input-text.child-1").stuff(); //Select only child-1

等等

来源

2013-02-25 19:21:07 Mahn

jQuery：获取扩展某些类的css类的元素

回答

相关问题