New jQuery Syntax

yushanwebdev · December 17, 2017, 6:27pm

var inital = newsletter.is(":checked");
var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");

Can somebody provide a resource about this syntax.

$(“#newsletter_topics”)[inital ? “removeClass” : “addClass”](“gray”)

Normally we write that like this know

var inital = newsletter.is(":checked");
var topics = inital ? $("#newsletter_topics").removeClass("gray") : $("#newsletter_topics").addClass("gray");

But that syntax is different. In jquery validation plugin use that syntax. Refer Line 83 in below metioned code.

github.com

jquery-validation/jquery-validation/blob/master/demo/index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery validation plug-in - main demo</title>
	<link rel="stylesheet" href="css/screen.css">
	<script src="../lib/jquery.js"></script>
	<script src="../dist/jquery.validate.js"></script>
	<script>
	$.validator.setDefaults({
		submitHandler: function() {
			alert("submitted!");
		}
	});

	$().ready(function() {
		// validate the comment form when it is submitted
		$("#commentForm").validate();

		// validate signup form on keyup and submit

This file has been truncated. show original

Implaier · December 17, 2017, 7:44pm

The confusing part is an inline ternary operator, which is in the square brackets.
Otherwise it’s standard jQuery.

sipofwater · December 17, 2017, 7:46pm

[inital ? “removeClass” : “addClass”]
when I see ? and :, I know this is the ternary operator:

if inital is true, it resolves to removeClass, if it’s false, to addClass.

Does that help?

yushanwebdev · December 20, 2017, 7:11pm

I`ve updated my comment @sipofwater

PortableStick · December 20, 2017, 8:23pm

This is confusing, but easy to understand if you explore the code a bit. I copied the code example to a CodePen below:

On line 70, I’m just logging the result of $("#newsletter_topics") to the console, but it won’t tell you much right away. It’s an array-like object, but we’re not passing a number into the brackets (which would make sense for an array). Instead, we’re passing a string, as though it were an object and we were accessing a property. Indeed, if you expand the object’s prototype, you’ll find two properties, removeClass and addClass, which are functions. So, the result of $("#newsletter_topics")[inital ? "removeClass" : "addClass"] is a function, and to that function we’re passing the string “gray”.

yushanwebdev · December 21, 2017, 6:11pm

Thank you very much @PortableStick. Nice explanation.