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

【问题标题】：jQuery: get elements of css classes that extends certain classjQuery：获取扩展某些类的css类的元素
【发布时间】：2013-02-26 03:21:07
【问题描述】：

我在 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 选择所有扩展第一个类的元素（在本例中为 input-text-parent）。我知道使用 $(".class") 我可以获取该类的所有元素，但我不知道如何获取它的所有子类。

非常感谢。

我希望我的解释足够清楚。

【问题讨论】：

在 css 中，extends 属性不存在，因此什么也不做（除了可能在任何验证器中产生错误）。这是 LESS 还是 SASS？
但是您可以对复杂元素使用两个类而不是扩展一个类，这样可以很快解决问题。

标签： jquery css

【解决方案1】：

我建议重构您的 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>

以及通过 jQuery 编写的以下 javascript：

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

等等。

【讨论】：

【解决方案2】：

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

但你可以：

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

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

或者选择所有具有特定类的元素

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

【讨论】：

【解决方案3】：

jQuery 没有专门为此内置任何东西，因为 css 并没有真正的子类支持。这些“子类”中的每一个实际上只是完全独立的类，它们恰好具有相似的名称。

jQuery的filter方法结合className属性应该可以选择input-text-child-n类的元素

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

【讨论】：