2010-03-29 20 views
10

Quiero verificar si un elemento tiene la clase .active, si lo hace agrega: margin-top: 4px;jQuery - Haz solo una vez

Sin embargo, solo quiero que esto ocurra una vez que, cuando la página se carga, una vez que se ha detectado la clase no quiero volver a detectarla y agregar el estilo CSS.

Esta clase se aplica cuando ciertos elementos están sobrevolados.

¿Esto es posible en jQuery?

Respuesta

22

Compruebe el evento one. ejemplo documentado:

$('#foo').one('click', function() { 
    alert('This will be displayed only once.'); 
}); 
+0

No creo que "uno" resuelva el problema de los problemas. ¿Puede uno estar obligado a documentar listo? – hunter

+3

@Hunter - La operadora dijo 'Esta clase se aplica cuando ciertos elementos están sobrevolando'. lo que me llevó a creer que él quiere un evento mouseover para disparar una sola vez en ciertos elementos. Podría estar equivocado, por supuesto, en cuyo caso tu respuesta es probablemente el camino a seguir. – karim79

+0

great @ karim79 esto funciona bien :) –

3

Esto se disparará una vez en la página de carga

$(function(){ 
    if ($("#elementid").hasClass("active")) 
    { 
     $("#elementid").css("margin-top", "4px"); 
    } 
}); 
+0

No creo que sea necesario "uno" en este caso. El uso de esta solución funcionará --- document.ready se dispara solo una vez. – macca1

2

La manera en que yo suelo hacer esto es:

(function($) { 

    // my custom function to process elements 
    function myProcessFunction(context) { 

    // get context  
    context = context || document; 

    // select elements within the context, filter out already processed ones 
    // loop through remained (unprocessed) elements 
    // '.my-class' - selector for the elements I want to process 
    $('.my-class:not(.my-class-processed)', context).each(function(i.e){ 

     // mark the element as processed 
     $(e).addClass('my-class-processed'); 

     // add process code here 

    }); 
    } 

    // run myProcessFunction on document.ready 
    $(document).ready(function(){ 
    myProcessFunction(); 
    }); 

})(jQuery); 

De esta manera tengo:

  • función reutilizable
  • elementos procesados ​​están marcados y no serán procesadas próxima vez que la función se llama
  • elementos se procesan en el contexto solamente, si se especifica (por ejemplo, el código HTML devuelto a través de una petición AJAX)

Esperanza esta ayuda)

Cuestiones relacionadas