如何在jQuery选择器中运行for循环?

时间:2016-12-01 17:35:35

标签: javascript jquery css

我正在为Facebook编写一个WebExtension,它将根据他们的隐私设置调用CSS。

$(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"});

我尝试过使用$.each jQuery,但在阅读完文档后我真的没有太多想法。

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 个答案:

答案 0 :(得分: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 :(得分:1)

你差不多自己做了

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