多个 CSS 选择器不适用于 jQuery css 方法答案

【问题标题】：Multiple CSS selectors not working with jQuery css method多个 CSS 选择器不适用于 jQuery css 方法
【发布时间】：2017-02-19 20:55:46
【问题描述】：

我正在尝试以下代码，但它不起作用。选择器没问题（在控制台中，两个列表项都显示）但与之相反，CSS 仅应用于第一个元素。为什么会这样？

HTML

<ul>
    <li class="c1">1</li>
    <li class="c2">2</li>
    <li>3</li>
</ul>

脚本

$(document).ready(function(){
    var a=$(".c1");
    var b=$(".c2");
    console.log(a, b);
    $(b, a).css("font-size", "20px");
});

【问题讨论】：

我不是 js/jq 方面的专家，但可能是var a=$(".c1")[0]; var b=$(".c2")[0];

标签： jquery html css

【解决方案1】：

如果您阅读了 jQuery 函数的文档，没有任何迹象表明它会起作用。

如果你想组合两个独立的 jQuery 对象，你可以使用add method：

b.add(a).css("font-size", "20px");

例子：

var a = $(".c1");
var b = $(".c2");
console.log(a, b);
b.add(a).css("font-size", "20px");

<ul>
  <li class="c1">1</li>
  <li class="c2">2</li>
  <li>3</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

或者，当然，在单次调用$ 时使用selector group：

$(".c1, .c2").css("font-size", "20px");

$(".c1, .c2").css("font-size", "20px");

<ul>
  <li class="c1">1</li>
  <li class="c2">2</li>
  <li>3</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

【讨论】：

好的。但是为什么$(a, b).click() 事物（即事件）有效？这种类型的多个选择器是否适用于事件而不适用于其他 jQuery 方法，如 css(), hide() ？
@VikasKumar: $(a, b).click() 上面的a 和b 不会工作。请注意，$(a, b) 不是“多个选择器”，它是$ 函数的多个参数。 $(".c1, .c2") 是一个 selector group（大致称为“多个选择器”），作为函数的 single 参数呈现。
哦！我想你想说我不能在另一个 $ 语句中使用 jQuery $ 语句？对吗？
@VikasKumar：在调用 jQuery 方法时，您可能会在某些地方使用 jQuery 对象，但不能合并两个 jQuery 对象的内容。我建议花一两个小时阅读 jQuery API，它可能会让事情变得更加清晰（实际上只需要这么长时间）。
一个更一般的问题。您似乎非常有经验的网络开发人员（您之前也回答了我的问题）。我喜欢使用网络技术，但新一代正在学习 Android、iOS 应用程序。你认为 Web 开发会在 2-3 年内停止，我在 Web 工具上的所有努力都会付诸东流吗？

【解决方案2】：

您可以在单个查询中选择多个元素，用逗号分隔

这应该可以工作

$(document).ready(function(){
    $(".c2, .c1").css("font-size", "20px");
});

【讨论】：

【解决方案3】：

这可能无法回答您的问题，但事实上您没有利用 class 元素属性。在您的情况下，您将两个 li 类项目分别命名为 .c1、.c2，这是一种不好的做法，除非您将它们更改为 ID，这是合理的。

你可以只为这两个项目应用相同的类名（即<li class="c"></li>），然后有以下语句：

$('.c').css('font-size', '20px');

【讨论】：

【解决方案4】：

Here is the working code,

$(document).ready(function(){
    var a=$(".c1,.c2");
    console.log(a);
    $(a).css("font-size", "20px");
});
---> $(".c1, .c2").css("font-size", "20px");

Here is the simple syntax to use multiple selector classes −
$('E, F, G,....')

as per your code, 
$(document).ready(function(){
    var a=$(".c1");
    var b=$(".c2");
    console.log(a, b);
    $(b, a).css("font-size", "20px");
});
it is like this, so it's not working.........
---> $(".c1", ".c2").css("font-size", "20px");

【讨论】：