CODEWITHSUNDEEP
javascriptjquery
Vonder
Vonder

Reputation: 4059

Displaying variable as a class name in Jquery

I am trying to incrementally display divs using Jquery, but I have a problem with getting the right syntax for displaying the variable as a class. Here is my code:

var mydiv_id = 'wacek_'+$a; /wacek_1, wacek_2, etc 

$("<div class="+mydiv_id"></div>").appendTo('body');
$( ".col-sm-4" ).append( $( '.'+mydiv_id ) );
$('.'+mydiv_id).hide();

I cannot get this right, any help would be greately appreciated.

Upvotes: 0

Views: 72

Answers (7)

epascarello
epascarello

Reputation: 207537

So as the other answers suggest, you have a syntax error with appending the class. The code can be done in a different manner so you do not have to worry about building the string. jQuery docs. Also there is no reason to append the element to the document, select the element, and reappend it. You have a reference to the element when you create it, so just use that reference.

var myDiv = $("<div></div>", {
        "class" : mydiv_id
    });
myDiv.hide()
myDiv.appendTo(".col-sm-4");

or in one line:

var myDiv = $("<div></div>", {
        "class" : mydiv_id
    }).hide()
    .appendTo(".col-sm-4");

Upvotes: 0

Adrian Lambertz
Adrian Lambertz

Reputation: 923

Check this fiddle

You had a small syntax error:

$("<div class="+mydiv_id"></div>").appendTo('body');

should be

$("<div class='"+mydiv_id+"'></div>").appendTo('body');

And I don't understand why you are appending your HTML to the body first and then into your DIV. It is also easier to chain your jQuery functions. Means instead of this:

$("<div class='"+mydiv_id+"'></div>").appendTo('body');
$( ".col-sm-4" ).append( $( '.'+mydiv_id ) );
$('.'+mydiv_id).hide();

you can use this:

$("<div class='"+my_id+"'>s</div>").appendTo('.col-sm-4').hide();

With the same result.

Upvotes: 1

Vicky Kumar
Vicky Kumar

Reputation: 1418

use this concatinate all the string one bye one 

 $("<div class="+mydiv_id+">"+"</div>")

Or 

$("<div class="+mydiv_id+"></div>")

Upvotes: -1

Robert Parham
Robert Parham

Reputation: 704

// This is not a proper comment. Use `//` for comments. 
var mydiv_id = 'wacek_'+$a; //wacek_1, wacek_2, etc 

// Missing your quotes around your class attribute. 
// missing concatenation. Also, instead of appending it to the body
// and then appending it to the your .col-sm-4, just
// append it to the column in the first place: Change 2nd line to:
$("<div class='"+mydiv_id+"'></div>").appendTo('.col-sm-4');

// Remove third line..
$('.'+mydiv_id).hide();

Upvotes: 0

Rahul Patel
Rahul Patel

Reputation: 5244

Please use 

$("<div class='"+mydiv_id+"'></div>").appendTo('body');

Instead of 

$("<div class="+mydiv_id"></div>").appendTo('body');

Please check below snippet for more understanding.

var $a = '1';
var mydiv_id = 'wacek_'+$a; //wacek_1, wacek_2, etc 

$("<div class='"+mydiv_id+"'></div>").appendTo('body');
$( ".col-sm-4" ).append( $( '.'+mydiv_id ) );
$('.'+mydiv_id).hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

suyesh
suyesh

Reputation: 659

var mydiv_id = 'wacek_'+$a; /wacek_1, wacek_2, etc 

$("<div class="+mydiv_id+"></div>").appendTo('body');
$( ".col-sm-4" ).append( $( '.'+mydiv_id ) );
$('.'+mydiv_id).hide();

Try this. one + was missing in your code.

Upvotes: 1

baao
baao

Reputation: 73261

You are concatenating the variable with string and are missing the + after the variable. You need it on both sides if a string comes again after the variable. Also, don't forget to enclose the created string in " (or '):

$("<div class='" + mydiv_id + "'></div>")

In the both statements below, the variable is the last expression - so you don't need an additional + - so this is correct:

$('.' + mydiv_id);

Upvotes: 0

Related Questions