Insufficient check for existence of DOM elements in jQuery object

[tywayne]

This was found in development of Twenty Sixteen (​https://github.com/WordPress/twentysixteen/issues/294),
and also exists in Twenty Fifteen, Twenty Fourteen, and Twenty Thirteen.

It presents itself in slightly different ways in each theme, but the essence of the bug is this:

A variable is set to a jQuery object with something like this ( example from twentyfifteen )

secondary = $( '#secondary' );
button = $( '.site-branding' ).find( '.secondary-toggle' );

And then those variables are used in a conditional statement later like this:

if ( ! secondary || ! button ) {
    return;
}

The conditional check is attempting to return early if the DOM elements don't exist, but since the variables contain a jQuery object, they are truthy regardless of whether it found any DOM elements.

A more appropriate check would be to use .length like so:

if ( ! secondary.length || ! button.length ) {
	return;
}

[tywayne]

Will gladly work up a patch - would it be best as a single combined patch or one for each bundled theme?

[tywayne]

Patch for Twenty Fifteen

[tywayne]

Patch for Twenty Fourteen

[tywayne]

Patch for Twenty Thirteen

[tywayne]

Combined patch for all three themes

[karmatosed]

Thanks for this @tywayne, it's great to see something from Twenty Sixteen being brought into the other default themes.

[tywayne]

Anyone have any thoughts or feedback on this? Anything else I can do or provide to help this ticket?

[karmatosed]

In 36999:

Twenty Thirteen, Twenty Fourteen and Twenty Fifteen: Fixes insufficient check for existence of DOM elements in jQuery object
Fixes #34033
Props: tywayne