user1151563
user1151563

Reputation:

jQuery basic structure

i wanna understand what that line means:

var oViewport = { obj: $('.viewport', root) };  

it's a line out of the plugin tinyscrollbar. Can someone explain the values of this line to me? I really searched for an answer but didn't find one. I appreciate your help.

Upvotes: 2

Views: 459

Answers (4)

dku.rajkumar
dku.rajkumar

Reputation: 18568

1. $('.viewport', root) 
        => this finds all elements having class viewport with context as root.

2. { obj: $('.viewport', root) }; 
       => creating a object literal with "obj" as property 
                       and the elements objects found above as value.

3. var oViewport = { obj: $('.viewport', root) };   
            => assigning the created object literal to variable "oViewport".

Upvotes: 0

Jordan Running
Jordan Running

Reputation: 106027

var oViewport = { obj: $('.viewport', root) };

In this code an object is being created using object literal syntax (e.g. { key: value }) and assigned to the new variable oViewport.

The object has one key or property, "obj", and its value is the result of the function named $ when called with the arguments '.viewport and root.

Since this is jQuery, $ is the main jQuery selector function, and in this instance it's selecting DOM elements with the CSS class "viewport", but only those which are children of the object root (called the "context," which probably is a DOM element itself).

The code above is roughly analogous to the below:

var selector         = '.viewport',
    selectedElements = $( selector, root ),
    oViewport        = new Object()  // equivalent to oViewport = {}
;

oViewport['obj'] = selectedElements; // equiv. to oViewport.obj = selectedElements;

Upvotes: 1

James Allardice
James Allardice

Reputation: 165971

It creates an object literal and assigns it to a variable named oViewport:

var oViewport = {}; //Empty object literal

The object has one property, named obj, whose value is a jQuery object:

var oViewport = { obj: $() }; //Property with jQuery object as value

The jQuery object finds all elements with class "viewport" that are descendants of whatever root is. root is the context for the selector:

$(".viewport", root); //Select all .viewport elements within root

Upvotes: 2

Oleksandr Skrypnyk
Oleksandr Skrypnyk

Reputation: 2820

Variable oViewport defined as object {obj: ...}; value of obj key inside this object is a Sizzle selector of .viewport in context of variable root (selects all DOM elements with viewport class inside root variable, which, usually, some DOM element too.

Upvotes: 0

Related Questions