4

Understanding Setting JQuery Variables

Recently I was introduced to setting a JQuery variable as seen below via assistance I was looking for on another question I had on StackOverflow. You can create an input field via simply calling upon a variable and it also appears that the anchor variable defines styles too!

var clicked = $('.clicked');
var ul = clicked.children('ul');
var input = $('<input />', {
    type: 'text',
    class: 'rename',
    value: 'New Folder',
    focusout: function() {
        $(this).siblings('a').html($(this).val()).show();
        $(this).remove();
        $(anchor).parent().removeClass('clicked');
    }
});
var anchor = $('<a>', {
    href: '#',
    css: {
        display: 'none'
    }
});
ul.prepend($('<li>').append([input.select(), anchor]));

I believe I understand how to modify and recreate the above snippet, the only aspect I don't actually understand is the setting of the styles. Upon my research, I haven't yet found anything alike this method and I'm hoping I can find more of an understanding via posting a question.

My aim is to understand and use more frequently with my next target being to create a select option field with all the options calling for .selectBoxIt() at the end.

UPDATE

I'm not entirely sure if this is the best way to achieve this however I've come up with a solution thanks to answers to as how to create a select option list;

var select = $('<select />');
var options = [
    {val : 1, text: '3 DAYS'},
    {val : 2, text: '10 DAYS'},
    {val : 3, text: '30 DAYS'},
    {val : 4, text: '60 DAYS'}
];
$('.hello').prepend(select);
$(options).each(function() {
    select.append($("<option>").attr('value',this.val).text(this.text));
});

// Because we are appending at a later date
// for the .selectBoxIt(); to work...
$(".hello select").selectBoxIt();
3
  • Why don't you add a inline style to the input tag itself.. also you can put all the styles in a class and use that class as well Commented May 20, 2016 at 0:17
  • @Reddy this is not so much regarding how to set styles but more to how this method works. If I can understand and recreate using to create an input field then by calling .selectBoxIt() this modifies via a JQuery plugin. Commented May 20, 2016 at 0:22
  • I'd love to understand, add features of which are currently not present and whatnot, however I do not know where to begin as my research is not bringing up anything useful. Commented May 20, 2016 at 0:23

1 Answer 1

2

You can start here http://api.jquery.com/jquery/ and scroll down to the section on creating new elements.

As of jQuery 1.4, the second argument to jQuery() can accept a plain object consisting of a superset of the properties that can be passed to the .attr() method.

Sign up to request clarification or add additional context in comments.

7 Comments

Thank you @etoisarobot. How come my posted snippet works however there is no apparent closing tags? Does JQuery run through this, understand and add to the end?
Additionally, in a select option list, how would I create several options?
@TimMarshall When you're just creating a single element, it just needs the element tag, it doesn't need the full HTML.
@TimMarshall Options are not attributes of the element, you can't add them there. You need to create the <option> elements seperately and then .append() them to the <select>
@TimMarshall since you are learning right now, don't worry too hard about best see if you can get it working first. As you learn more you'll go back and realize "oh hey I can do this like ________"
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.