2016-12-01 59 views
0

我正在編寫一個Facebook的WebExtension,它將根據他們的隱私設置調用CSS。如何在jQuery選擇器中運行for循環?

$(document).ready(function(){ 
    $("a[data-tooltip-content*='Public']").closest(".userContentWrapper._5pcr").css({"background-color": "yellow"}); 
    $("a[data-tooltip-content*='Only Me']").closest(".userContentWrapper._5pcr").css({"background-color": "lime"}); 
    $("a[data-tooltip-content*='friends']").closest(".userContentWrapper._5pcr").css({"background-color": "cyan"}); 
    $("a[data-tooltip-content*='Public']").closest("._2tdc").css({"background-color": "yellow"}); 
    $("a[data-tooltip-content*='Only Me']").closest("._2tdc").css({"background-color": "lime"}); 
    $("a[data-tooltip-content*='friends']").closest("._2tdc").css({"background-color": "cyan"}); 

但是,我注意到不同的頁面佈局有不同的類值,我需要用CSS代碼調用。

有什麼辦法可以在jQuery選擇器中編寫for循環嗎?

$("a[data-tooltip-content*='Public']").closest("**For(a list of class name), loop through all of them)**").css({"background-color": "yellow"}); 

我一直在使用jQuery的$.each試過,但我真的沒有太多的想法,通過的文件看完之後。

var obj = {".userContentWrapper._5pcr" , "._2dc"}; 

$.each(obj, function(index,element)){ 
     $("a[data-tooltip-content]").closest(obj).css({"background-color": "violet"}); 
     $("a[data-tooltip-content*='Public']").closest(obj).css({"background-color": "yellow"}); 
     $("a[data-tooltip-content*='Only Me']").closest(obj).css({"background-color": "lime"}); 
     $("a[data-tooltip-content*='friends']").closest(obj).css({"background-color": "cyan"}); 
} 

樣本結果(original image link):

sample result

+2

['$ .each'(http://api.jquery.com/jquery.each/) – empiric

+1

逗號,如果您需要選擇多個班級。 –

+0

刪除~~~~~~~~ – jona

回答

2

這應該是爲存儲陣列中的所有的類名,並使用循環

var classses = ['.class1','.class2']; 
for(var i=0;i<classes.length;i++) 
    $("a[data-tooltip-content*='Public']").closest(classes[i]).css({"background-color": "yellow"}); 

然而一樣容易,一般來說,多個選擇器可以用逗號分隔,所以這也可以起作用。

$("a[data-tooltip-content*='Public']").closest('.class1, .class2') 
             .css({"background-color": "yellow"}); 
1

你幾乎做到了自己

$("a[data-tooltip-content*='Public']").closest(".class1, .class2, .class3").css({"background-color": "yellow"});