I'm trying following code but it's not working. The selectors are all right (In console, both list items are displayed) but opposite to it, the CSS is applied to only first element. Why is it so?
HTML
<ul>
<li class="c1">1</li>
<li class="c2">2</li>
<li>3</li>
</ul>
SCRIPT
$(document).ready(function(){
var a=$(".c1");
var b=$(".c2");
console.log(a, b);
$(b, a).css("font-size", "20px");
});
If you read the documentation for the jQuery function, there's nothing suggesting that that would work.
If you want to combine two separate jQuery objects, you do that with the add method:
b.add(a).css("font-size", "20px");
Example:
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>Or, of course, use a selector group when calling $ a single time:
$(".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() thing (i.e., events) work? Is this type of multiple selectors meant for events and not for other jQuery methods like css(), hide() ?
$(a, b).click() with the a and b above wouldn't work. Note that $(a, b) isn't "multiple selectors," it's multiple arguments to the $ function. $(".c1, .c2") is a selector group (loosely, "multiple selectors") presented as a single argument to the function.You can select multiple element in a single query separated by comma
This should work
$(document).ready(function(){
$(".c2, .c1").css("font-size", "20px");
});
This may not answer your question, but the fact that you're not taking advantage of the class element attribute. In your case, you named the two li class items differently, .c1, .c2 respectively which is a bad practice unless you changed them to IDs and that would be reasonable.
You can just apply the same class name for the two items (i.e. <li class="c"></li>), then have the following statement:
$('.c').css('font-size', '20px');
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");
var a=$(".c1")[0]; var b=$(".c2")[0];