0

It's probably simple, but I can't figure it out or word it correctly for search engines. I'm trying not to use jquery where possible for a.performance and b.personal practice.

I am selecting an element

var container = document.getElementById('container');

Then I try to chain this jquery method on it

container.backstretch('url/to/img');

The jquery plugin I'm using is called backstretch.js

Is there an easy way to do this? Or does the answer rely on how the method was written?

Thanks!

Edit:

Console displays this error:

Uncaught TypeError: container.backstretch is not a function

Edit:

$(container).backstretch('url/to/img'); works. But I don't fully understand it. Is this because jQuery needs to create an object to attach the method to?

John_911
  • 1,124
  • 2
  • 21
  • 38
  • 1
    When dealing with jQuery methods and properties, just take your element and reference it as a jQuery object: `var $container = $('#container');` – zer00ne May 16 '16 at 01:05
  • @itsgoingdown Just thought of this too haha. It works. Is this because jQuery needs to create an object to attach the method to? – John_911 May 16 '16 at 01:05
  • Yes indeed, sir. Easy sleezy ;-) – zer00ne May 16 '16 at 01:06
  • 1
    Yes, it's a `jQuery` plugin, it won't work on pure `DOM` object, so you have to wrap that cached `container` DOM object with jquery, and call it on `jquery object` – The Process May 16 '16 at 01:12

1 Answers1

1

No sure if there's any performance savings, especially this being an ID selector, but, this is how:

var container = document.getElementById('container');
$(container).backstretch('url/to/img');

Or simply just use:

$('#container').backstretch('url/to/img');
PeterKA
  • 24,158
  • 5
  • 26
  • 48