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();
  • 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 – Rajshekar Reddy May 20 '16 at 00: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. –  May 20 '16 at 00: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. –  May 20 '16 at 00:23

1 Answers1

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.

etoisarobot
  • 7,684
  • 15
  • 54
  • 83
  • 1
    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? –  May 20 '16 at 01:01
  • Additionally, in a select option list, how would I create several options? –  May 20 '16 at 01:10
  • This [answer](http://stackoverflow.com/a/6602002/2199267) seems useful however can it be done in style of my above snippet? –  May 20 '16 at 01:13
  • 2
    @TimMarshall When you're just creating a single element, it just needs the element tag, it doesn't need the full HTML. – Barmar May 20 '16 at 01:13
  • 1
    @TimMarshall Options are not attributes of the element, you can't add them there. You need to create the ` – Barmar May 20 '16 at 01:14
  • @etoisarobot I've just updated my question, what would you say to this method? –  May 20 '16 at 01:39
  • 1
    @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 ________" – Jhecht May 20 '16 at 02:20