2011-05-24 8 views
5

Duplicar posible:
Facing weird problem while adding and removing class.cómo encontrar un elemento html y luego eliminarlo?

Supongamos que tengo el código HTML siguiente -

 <div class="div_portlet ui-widget ui-widget-content ui-corner-all defaultcontentbg portlet-width default_border default_border_color portlet_space"> 
    <div class="div_header headertitle align_center defaultheadercolor portlet-header-left-padding default_bottom_border default_border_color"> 
    <span class="ui-icon ui-icon-minusthick"></span> 
     Order Header Level Information</div> 
     <div id="ordrHdrLvnInfn" class="div_content portlet-width"> 

Lo que estoy tratando de hacer es, comprobar si vano con clase ui-icon ui-icon-minusthick existe o no, si existe, quítelo y luego agréguelo. Probé en el seguimiento de camino, pero no está funcionando

función javascript ::

jQuery.fn.initPortlet = function(parent_component ,header , component){ 
     this.find(header).find('span.ui-icon').remove(); 

     this.addClass("ui-widget ui-widget-content ui-corner-all") 
      .find(header)   
      .addClass("headertitle") 
      .addClass("align_center") 
      .addClass("defaultheadercolor") 
      .end() 
      .prepend('<span class="ui-icon ui-icon-minusthick"></span>') 
      .find(component); 
        } 

y yo estoy llamando esta función de esta manera ..

$('.div_portlet').initPortlet('.div_portlet','.div_header','.div_content') 

En primer lugar, debe quitar el span entonces agrégalo, pero si estoy llamando a esta función varias veces, entonces sigue agregando ese lapso.
¿Cómo puedo hacer esto o hay alguna otra forma mejor de hacerlo? ¡Gracias!

+0

una sugerencia: cambio '.addClass ("headerTitle") addClass ("align_center") addClass ("defaultheadercolor")' a sola línea 'addClass ("headerTitle defaultheadercolor align_center")' – diEcho

+0

.. @ mplungjan, ¿podría explicarme? ¿Qué quieres decir? – Vivek

+0

¿Tienes un violín? ¿Hay múltiples div_portlets en una página? –

Respuesta

3

Usted está agregando su extensión fuera del div_header. Su .end() significa que ya no está trabajando con su filtro de encabezado para que el lapso se agregue al comienzo de su ui_widget ...

http://jsfiddle.net/Qjrcg/ es un violín de su código. Si miras, tengo un .end comentado() justo después del prepend. Si descomenta esto y comenta el anterior, entonces el lapso (que puse el texto de prueba para que sea más fácil de ver) solo se crea una vez.

Afortunadamente esto debería solucionarlo.

+0

gracias amigo, pero eso es un error tipográfico error – Vivek

+0

¿Podría aclarar lo que quiere decir? mover el extremo hace la diferencia entre crear muchos tramos (como en http://jsfiddle.net/Qjrcg/) y un tramo (como en http://jsfiddle.net/Qjrcg/1/). Si esto no es lo que quieres, ¿puedes aclarar por favor? Este segundo bit de código parece estar eliminando el lapso y luego volviéndolo a leer. Esto es claramente visible al poner un número aleatorio en el lapso (http://jsfiddle.net/Qjrcg/2). – Chris

+0

sí, gracias al hombre por sus esfuerzos ... sí, usted está escribiendo hice el mismo error de tipeo en mi jsfile también. muchas gracias .. – Vivek

1

Creo que el problema está en su primera encontrar

this.find(header).find('span.ui-icon').remove(); 

que está tratando de encontrar el icono dentro de la cabecera, sino que está prepending el siguiente icono para el portlet (este)

.prepend('<span class="ui-icon ui-icon-minusthick"></span>') 

a fin de tratar este

this.find('span.ui-icon').remove(); 

Mira la actualización que hice para violín de Chris: http://jsfiddle.net/Qjrcg/5/

HTH

Cuestiones relacionadas