jQuery redimensionnable(), accès à l'objet original

Question

Cela peut sembler évident, mais je ne le trouve pas. Lorsque vous utilisez redimensionnable, je veux enregistrer la nouvelle largeur de l'image, mais comment puis-je accéder à l'attribut ID de l'image que je viens de redimensionner? Ceci est mon code:

$('img.article_image').resizable({ 
    aspectRatio: true, 
    handles: "se", 
    stop: function(event, ui){ 
     // Here I want to access the ID attribute 
     // of the img.article_image I am resizing 
}}); 

Ainsi, l'objet a ui ui.helper, que je ne peux pas utiliser. C'est à dire. ui.helper.attr ("id") ou $ (ui.helper) .attr ("id") sont tous deux indéfinis. Je ne peux pas utiliser $ (this) .attr ("id") non plus, mais je CAN utiliser $ (this) .width() pour voir la nouvelle largeur, donc c'est très étrange.

Qu'est-ce que je fais mal? Lors de l'utilisation de draggable(), il semble que je puisse accéder à $ (this) de la bonne manière, mais pas avec redimensionnable ... Des suggestions?

Answer 1

le paramètre ui détient l'élément redimensionnée

stop: function(event, ui){ 
alert(ui.originalElement[0].id); 
} 

Answer 2

Dans votre cas, vous pouvez simplement obtenir l'ID à l'intérieur de stop rappel avec ce code:

$('img.article_image').attr('id'); 

Ce sera toutefois dupliquer le sélecteur, mais des paramètres transmis par stop fonction de rappel n'a pas l'enregistrement de l'original objet qui a été redimensionné.

Answer 3

Je n'ai pas utilisé le plugin redimensionnable, mais s'il suit les mêmes directives que les événements jQuery intégrés, alors this sera une référence à l'élément DOM affecté. Ainsi, vous pouvez obtenir un objet enveloppé jQuery comme ceci:

$('img.article_image').resizable({ 
    aspectRatio: true, 
    handles: "se", 
    stop: function(event, ui){ 
     var img = $(this); 
     var id = img.attr("id"); 
}});