0

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

非常感谢。

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

4

3 回答 3

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

等等。

于 2013-02-25T19:21:07.237 回答
0

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

但是你可以 ：

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

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

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

$('.input-text-parent .input-text-parent-1').each(function(){
    //Do something
});
于 2013-02-25T19:12:45.237 回答
0

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

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

$("input").filter(function(){
    return this.className.indexOf("input-text-child-") >= 0;
}).doSomething();
于 2013-02-25T19:13:35.857 回答