I think this is overrated. There is no reason to add an extra class to the parent (if you do not do this for styling, in which case feel free to add it back).
Basically, we set the default data value only once, and if it is there, we do not set it again (we just reuse it).
You will also notice the use of $ .data () instead of .attr (). Try to avoid .attr (). This is not all that is effective for this kind of thing, as you basically ask it to look for or store a value in a real DOM (manipulating the DOM is very expensive). In most cases, this is not the right use. In your code, $ (this) .data ("default") is the right way to get what you want. As an example:
<input type="text" id="username" data-item="random data" />
using jQuery to get a data item that you would call:
$("#username").data("item");
and go back to "random data" .
Last, when using animations (especially “slow” animations), you should make it a habit to stop the stop first, so any animations that are in the process stop immediately before the next animation starts.
$('input[disabled="disabled"]').removeAttr("disabled").prop("readonly", true); $('input').focus(function() { if ($(this).val().length > 20) { $(this).data('default', $(this).data('default') || $(this).width()); $(this).stop().animate({ width: 300 }, 'slow'); } }).blur(function() { $(this).stop().animate({ width: $(this).data('default') }, 'fast'); });
Here is jsfiddle for you.
Hope I helped you, all that said, keep in mind that your initial question was answered correctly by several other people here. They all provided the correct code so as not to execute anything if the parent has a specific class. In the future, when asking questions, be careful to articulate clearly what problem you are having. You asked something like "how can I switch the size based on focus", and not "if the parent class is not applied ...". Other answers answered your question. The problem is that you did not ask the right question.