2010-01-05 16 views
6

Lo que intento lograr: deseo agregar un DIV después de un DIV existente y asignarle una clase específica.Anexar DIV e inmediatamente agregar clase en jQuery

empecé con esto:

var myClass = "thisIsMyClass"; 
$(this).after("<div></div>").addClass(myClass) 

El problema con esto es que se agrega a myClass $ (este) en lugar de la DIV de nueva creación.

Así que dio a este un intento:

var myClass = "thisIsMyClass"; 
$(this).after("<div class='" & thisIsMyClass & "'></div>") 

Pero jQuery no le gusta eso.

me puedo hacer esto, sin embargo:

$(this).after("<div class='thisIsMyClass'></div>") 

jQuery está bien con esa sintaxis. Por supuesto, pierdo la capacidad de pasarlo como una variable.

Supongo que estoy haciendo algo bastante obviamente incorrecto. Pero estoy perplejo en cuanto a lo que es eso.

Respuesta

13
$(this).after($("<div></div>").addClass(myClass)); 
+0

No tengo idea de por qué nunca se me ocurrió pero nunca pensé en anotar las declaraciones en jQuery. Gracias, Kobi! –

5

tal vez algo como:

var myClass = "thisIsMyClass"; 
var div = $("<div></div>").addClass(myClass); 
$(this).after(div); 

el uso del trabajo & didnt porque esto no es VB, la concatenación de cadenas se realiza con el +

+0

"porque esto no es vb". DOH! (Estoy abofeteando mi frente ahora). Claramente no dormí lo suficiente anoche. –

+0

podría pasarle a cualquiera :) –

3

Por lo general terminan haciendo algo como esto:

var myClass = 'thisIsMyClass'; 
$(this).after($("<div/>").addClass(myClass)); 
0

¿Has intentado utilizar un "+ "carácter en lugar de un" & "? Y, por cierto, no veo ningún punto y coma al final de algunos comandos, ¿podría estar equivocado?

var myClass = "thisIsMyClass"; 
$(this).after("<div class='"+ thisIsMyClass +"'></div>"); 
2
$("<div></div>").insertAfter(this).addClass(myClass); 
+0

Esa es una opción interesante. ¡Gracias! –

2

El jQuery después método devuelve el mismo selector que se llamó después a permitir el encadenamiento de método (al igual que la mayoría de los métodos de jQuery), por lo que su nombre de la clase que está pasando al este elemento.

Para hacer esto usted puede hacer ya sea:

$(this).after($('<div class="' + myClass + '"></div>')); 

o invertir el orden de selección:

$('<div></div>').insertAfter($(this)).addClass('thisIsMyClass'); 
0

que he estado haciendo esto porque su super fácil de leer cuando vuelva a código más tarde

$('#description').append('<p></p>'); 
$('#description p:last-child').addClass('name'); 
0

Aunque es muy tarde, pero es una solución concreta a las preguntas anteriores. Puede agregar un div con una clase a cualquier selector a través de js como este:

$('<div/>',{ class : 'sample'}).appendTo("body");