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類的元素

回答

相關問題