Check whether variables are equal with jquery

Question

Hey i am new to jquery and i was wondering whether someone could give me some help when it comes to working with variables. The below is what i have thus far. I want to find a certain divs left position and width and then do some basic maths with those variables. Sorry is this explanation is a little confusing. So just a example as to how i would create a variable from a divs width and how to check whether variables are equal to one another would be great.

$(document).ready(function(){

//Check distance from left  
var p = $(".GalleryItem");
var position = p.position();
$(".LeftPosition").text( "left: " + position.left + ", top: " + position.top );

//Check width of GalleryItem
var GalleryContainer = $(".GalleryItem");
$(".WidthText").text( "innerWidth:" + GalleryContainer.innerWidth() );

//Check width of Gallery
var GalleryContainer = $("#Gallery");
$(".WidthGalleryText").text( "innerWidth:" + GalleryContainer.innerWidth() );

});

Answer 1

I guess you could just do something like:

var galleryItemWidth = $(".GalleryItem").innerWidth();
var galleryWidth = $("#Gallery").innerWidth();

And then just check something like this:

if (galleryItemWidth == galleryWidth) {
   // Do something
}
else {
   // Do something else
}

Or maybe I misunderstood your question?

Answer 2

The .width() function is "recommended when width needs to be used in a mathematical calculation". It also covers windows and document rather than just divs.

var position = $('.GalleryItem').position();
var galleryItemLeft = position.left;
var galleryItemWidth = $('.GalleryItem').width();
var galleryWidth = $('#Gallery').width();

// do calculations such as 
var galleryItemRight = galleryItemLeft + galleryItemWidth;

// check if one width = another
if(galleryItemWidth == galleryWidth) { ... }

For jQuery, working with return values is just like working with any return value in javascript. Set a var = to the function (expecting a return value), compare with the '==' operator. In jQuery you can also set the actual selector objects to variables as you have done with 'var p = $('.GalleryItem');' To compare selector objects you would compare them by their properties, such as position, width, color, etc.

Hope this helps.