jQuery:获取扩展特定类的CSS类的元素

Question

我在 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") 我可以获得该类的所有元素，但我不知道如何获得它的所有子类。

非常感谢。

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

Answer 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

等等。