CODEWITHSUNDEEP
javascriptjquery
David Garcia
David Garcia

Reputation: 2696

Apply method to variable

I am trying to add a method to a variable to be used as following;

var method = ".wrap";   
jQuery('.container')+[method]+("<div>Hello World</div>");

Essentially what it should do is;

jQuery('.container').wrap("<div>Hello World</div>");

but it does not work, no error, the hello world div is not being added in the page. Here is the original question http://goo.gl/MQ2tr, I thought I ask it again in simpler terms.

update As long as I have a single method inside the variable it works nice with bracket notation, however I need to use something like .parent().parent().wrap() how can I make it work? i tried removing all the dots but i just get an error Uncaught TypeError: Object [object Object] has no method 'parent()parent()wrap'

Here is how my list form looks like now

 <select name="lu_ban_data[method]" id="lu_ban_data" />
        <option value="append">Append</option>
        <option value="prepend">Prepend</option>
        <option value="wrap">Wrap</option>
        <option value="parent()parent()wrap">Parent</option>
</select>

Upvotes: 2

Views: 105

Answers (1)

t.niese
t.niese

Reputation: 40852

Just write it this way:

var method = "wrap";   
jQuery('.container')[method]("<div>Hello World</div>");

You can access properties of an object in two ways. Either by dot notation or by square bracket notation

 obj.property
 obj['property']

 var propName = "property"
 obj[propName]

EDIT

Here the link to MDN Member Operators

A short explanation to what your code does:

  jQuery('.container')+[method]+("<div>Hello World</div>");

It is an addition of 3 element:

  1. The result set of jQuery('.container')
  2. An Array containing one element [method]
  3. The String "<div>Hello World</div>"

The result of this depends on the implementation but would most likely be something like this:

"[object Object].wrap<div>Hello World</div>"
 +-------------+
                +---+
                     +--------------------+

The result looks this way because the JavaScript-Engines normally call toString on the elements if they can't add them in another way.

EDIT

Update to the edited question:

 element.parent().parent().wrap()

would e.g. equal to:

 element['parent']()['parent']().wrap()

or

 element['parent']().parent()['wrap']()

or any other combination ob dot or brace notation

You want to represent .parent().parent().wrap() as one string and use this as access. But this would not work that way. The dot notation or brace notation only return the property of the given element. So parent() returns the parent of jQuery('.container') on this returned object you call parant() and on that returned object you call wrap()

So (assuming only your last function call would have arguments) you would need something like this:

function chainedFunctionCall( obj, chain, arguments) {
    var curr = obj;
    var splitChain = chain.split(".");  //split the 'call chain' passed a strings by '.' (the dot in the string has nothing to do with the dot notation)

    //iterate over the resulting array (except the last one where we need to pass the arguments to
    for( var i=0 ; i<splitChain.length-1 ; i++ ) {
        //call the function by the given name in the chain and store the result as current object
        curr = curr[splitChain[i]]();
    }

    //when we reached the last name in the chain call that function using `apply` so that we can pass the arguments we got as array to the function call, and call it in the context of the current object.
    return curr[splitChain[i]].apply(curr,arguments);
}


var obj = $(".container");
var callChain = "parent.parent.wrap";


chainedFunctionCall( obj, callChain, ["<div>your argument you pass there</div>"]);

Upvotes: 5

Related Questions