Jquery Question posted in
The official Jquery Api Documentation can be found here.

variables as selectors in jQuery

I’m learning jQuery and i’m essentially wondering if it’s possible to use variables as selectors, like this:

let vbox = $("body").append("<div id='box'></div>");
vbox.css({
  'width': '200px',
  'height':'300px',
  'background-color':'hsl(0, 0%, 10%)',
  'border-radius':'10px',
  'position':'absolute',
  'color':'white',
'text-align':'center'
});

when I do this, the css code seems to apply to the whole document. I’m wondering if there’s anything wrong with this/if it just won’t work like that.

I figured out how to do it both of these ways:

var vbox = $("<div id='box'></div>")
  $("body").append(vbox)
  vbox.css({
    width:'200px',
    height:'300px',
    background:'hsl(0, 0%, 10%)',
    borderRadius:'10px',
    position:'absolute',
    color:'white',
    textAlign:'center'
  });

$("body").append("<div id='box'></div>");
  var bx = $('#box')
  bx.css({
    width:'200px',
    height:'300px',
    background:'hsl(0, 0%, 10%)',
    borderRadius:'10px',
    position:'absolute',
    color:'white',
    textAlign:'center'
  });

I’m just wondering what’s different about the first way and why it doesn’t work.

Tags:

2

Answers


  1. 0

    I’m just wondering what’s different about the first way and why it doesn’t work.

    It’s different because the variables reference different elements.

    In this case:

    let vbox = $("body").append("<div id='box'></div>");

    The vbox variable is a reference to (a jQuery wrapper for) the <body> element. So when you apply CSS styling to vbox, you apply it to the <body> element.

    In these cases:

    var vbox = $("<div id='box'></div>");
// and
var bx = $('#box');

    These variables are references to (jQuery wrappers for) <div> elements. So when you apply CSS to them you are applying it to those <div> elements.

    Both versions "work", they’re just applying CSS to different elements.

    As an aside… These aren’t "variables as selectors". The selectors are the strings you pass to the $() function. You’re simply storing the results of your functions in variables, as you likely would with any function that returns a result.

    Login or Signup to reply.
  2. 0

    Please accept the other answer. This is just to provide more details on some options using your generated HTML. Note the point of this is how to hit the DOM one time not multiple times. I added some in-line comments.

    //create the element and give it CSS, then text
//At this point it is NOT in the DOM on the page.
const vbox = $("<div></div>").css({
  width: '200px',
  height: '300px',
  background: 'hsl(0, 0%, 10%)',
  borderRadius: '10px',
  position: 'relative',
  color: 'white',
  textAlign: 'center'
}).text('Hi');

//change the text
vbox.text('Better Howdy!');
// we can still append to the new div since all those methods return "jQuery" as they are chained
let cheese = $("<div>cheese</div>");
// we can still reference it to it since all those methods return "jQuery" as they are chained
cheese.appendTo(vbox);
//finally we hit the DOM once to append all that
vbox.appendTo('body');

// we can see we still have a reference to the element
vbox.append('<span class="beer">Beer</span>');
//we can also put something before it in the DOM
vbox.before('<span class="beer">Cold Beer</span>');
//we can also wrap it
vbox.wrap('<div class="blocky"></div>');
    .beer {
  color: yellow;
  font-size: 2em;
  background-color: #00a0ff;
  display: grid;
  place-items: center;
}

.blocky {
  display: grid;
  place-items: center;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search