...

View Full Version : Return jQuery Object from property



grogo21
03-21-2012, 09:41 AM
Hello,

how can I make the following object work properly so when I use 'layers.photo1.layer' a jQuery element is returned rather than the text of the function as it is now.

I also need to be able to find the element by the photo1 object its contained in not have to input a string there so that I can also reuse it in the background layer.


var layers = {
photo1 : {
layer: function() { return $(element).find($('photo1'))}
},
background : {
layer: function() { return $(element).find($('background'))}
}
}

Thx Very Much!

devnull69
03-21-2012, 09:47 AM
layer is a function (rather a function reference). If you want to CALL this function you need to append () parentheses to the end. Otherwise you will get a function reference (which will be converted to a string containing the source text of the function).

Second: The .find() method expects a selector and not another jQuery object. So you don't need $('photo1'). You only need the string

Finally: 'photo1' is a valid selector, but only for HTML elements called <photo1>. I guess you don't have elements like that on your page, do you? So is photo1 an id or a class attribute?

So this will do the trick if "photo1" is an id attribute


var layers = {
photo1 : {
layer: function() { return $(element).find('#photo1')}
},
background : {
layer: function() { return $(element).find('#background')}
}
}

var myLayer = layers.photo1.layer();

glenngv
03-21-2012, 10:59 AM
Why would you need a function if it can be simplified like this?



var layers = {
photo1 : {
layer: $(element).find('#photo1')
},
background : {
layer: $(element).find('#background')
}
}
var myLayer = layers.photo1.layer;

grogo21
03-22-2012, 12:39 AM
devnull69, your solution work just great! I think I was trying to push through this task with little sleep and I made some silly mistakes. I have no explanation for why I was trying to pass a jQuery object into the find method haha.

glenngv, your solution seems like it should work but at the moment it is returning undefined because the actual elements don't exist yet on the page. It seems like a better option performance wise tho because it appears as though it wouldn't have to search for the element each time the prop is called. I will have to comeback and implement it.

The last question I have is how can I replace '#photo1' and '#background' with the name of the parent object. The objects photo1 and background and any others I add will be elements on the page. If its possible I could then reuse the same function for each layer prop.

Thx

glenngv
03-22-2012, 09:19 AM
Move the declaration of layers variable inside document ready or at the bottom of the body to ensure that the elements exist on the page.

For the last question. Are 'photo1' and 'background' the actual tag names?? Can you post the html for those elements?

grogo21
03-23-2012, 08:09 AM
yes, those will become the id's of the div elements.



var buildCanvas = function(){
for(var layer in importLayers) {
$(plugin.canvasContainer).append(String.format('<div id="{0}" class="layer" style="top: {1}px; left: {2}px;"></div>', layer, importLayers[layer].yPos, importLayers[layer].xPos));
}
}

devnull69
03-23-2012, 11:31 AM
You'll have to be more accurate when it comes to naming conventions

Example:


<div id="myid" name="myname" class="myclass"></div>

1. div is the tag name. Selector "div"
2. id is the id attribute (not the name, not the tag name). It must be unique for the whole document. Selector "#myid"
3. name is the name attribute (not the tag name). It doesn't necessarily have to be unique. Selector "[name='myname']"
4. class is the class name attribute. Selector ".myclass"

So if you have $('photo1'), the selector will ONLY be able to select elements if you actually have an element with TAG NAME photo1, e.g.


<photo1 id="whatever"></photo1>

And I bet you don't have such elements!

So the question again is


Are 'photo1' and 'background' the actual tag names??



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum