CODEWITHSUNDEEP
javascriptjquery
user2199267
user2199267

Reputation:

Understanding Setting JQuery Variables

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();

Upvotes: 4

Views: 133

Answers (1)

etoisarobot
etoisarobot

Reputation: 7794

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.

Upvotes: 2

Related Questions