2011-10-27 23 views
19

después de 2 horas de búsqueda decidí hacer mi pregunta.jquery anexar div dentro de div con id y manipular

Tengo un div:

<div id="box"></div> 

Quiero añadir un div dentro de la div anteriormente usando jQuery.

me trataron (siguiente código está dentro de una función):

var e = $('<div style="display:block; float:left;width:'+width+'px; height:'+height+'px; margin-top:'+positionY+'px;margin-left:'+positionX+'px;border:1px dashed #CCCCCC;"></div>'); 
$('div', e).attr('id', 'myid'); 
$("#box").append(e); 

pero el acceso $ ("# myid") no está funcionando.

¿alguna idea sobre cómo agregar un div dentro de un div y ser capaz de manipularlos?

gracias!

Respuesta

29

Es sólo el orden equivocado

var e = $('<div style="display:block; float:left;width:'+width+'px; height:'+height+'px; margin-top:'+positionY+'px;margin-left:'+positionX+'px;border:1px dashed #CCCCCC;"></div>'); 
$('#box').append(e);  
e.attr('id', 'myid'); 

Anexar primero y luego el acceso/attr conjunto.

+0

¿Por qué utilizar tres líneas de código cuando solo se necesita una? ¿Por qué adjuntar la identificación después cuando se puede poner directamente en el código fuente HTML? – jfriend00

+7

Estoy tratando de resolver el problema original, no para mejorarlo. –

+0

Tenía la esperanza de que OP pudiera ver que había una forma mejorada de hacerlo. – jfriend00

4

cosas Estás complicar:

var e = $('<div style="display:block; float:left;width:'+width+'px; height:'+height+'px; margin-top:'+positionY+'px;margin-left:'+positionX+'px;border:1px dashed #CCCCCC;"></div>'); 
e.attr('id', 'myid'); 
$('#box').append(e); 

Por ejemplo: http://jsfiddle.net/ambiguous/Dm5J2/

0
var e = $('<div style="display:block; id="myid" float:left;width:'+width+'px; height:'+height+'px; margin-top:'+positionY+'px;margin-left:'+positionX+'px;border:1px dashed #CCCCCC;"></div>'); 
$("#box").html(e); 
+0

El método '.html()' toma una cadena, no un objeto jQuery como argumento. – jfriend00

3

por qué no ir aún más simple, ya sea con una de estas opciones:

$("#box").html('<div id="myid" style="display:block; float:left;width:'+width+'px; height:'+height+'px; margin-top:'+positionY+'px;margin-left:'+positionX+'px;border:1px dashed #CCCCCC;"></div>'); 

O, si desea agregarlo al contenido existente:

$("#box").append('<div id="myid" style="display:block; float:left;width:'+width+'px; height:'+height+'px; margin-top:'+positionY+'px;margin-left:'+positionX+'px;border:1px dashed #CCCCCC;"></div>'); 

Nota: Puse el id="myid" directamente en la cadena HTML en lugar de usar un código separado para configurarlo.

Tanto los métodos .html() y .append() jQuery pueden tomar una cadena de HTML, por lo que no es necesario utilizar un paso separado para crear los objetos.