if .parent() .hasclass then do not apply the function

Question

I have this function which should be called only when parent doesn't have the class cooling.

function inputWidth() {
        $('input[disabled="disabled"]').removeAttr("disabled").prop("readonly", true);
        $('input[type!="submit"]').focus(function(){
            if ($(this).val().length > 20) {
                $(this).attr('data-default', $(this).width());
                $(this).animate({
                    width: 350
                }, 'slow');
                $(this).parent().addClass('cooling');
            }
        }).blur(function(){ /* lookup the original width */
            var w = $(this).attr('data-default');
            $(this).animate({
                width: w
            }, 'fast');
            $(this).parent().removeClass('cooling');
        });
   };

Solution 1

I'm thinking this is being overanalyzed. There's no reason to add an extra class to the parent (unless you're doing this for styling, in which case feel free to add it back in).

Basically we only set the default data value once, and if it's there we don't set it again (we just reuse it).

You'll also notice the use of $.data() instead of .attr(). Try to avoid .attr(). It's not all that efficient for this sort of thing as you're basically asking it to lookup or store the value in the actual DOM (manipulating the DOM is very expensive). In most cases it's not the proper usage anyways. In your code, $(this).data("default") is the proper way to get at what you want. As an example:

<input type="text" id="username" data-item="random data" />

using jQuery to get at data-item you'd call:

$("#username").data("item");

and get back "random data".

One last thing, when using animations (especially 'slow' animations) you should make it a habit to call stop first, that way any animations that are in progress are halted immediately before starting the next animation.

$('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() { /* lookup the original width */
    $(this).stop().animate({
        width: $(this).data('default')
    }, 'fast');
});

Here's a jsfiddle for you as well.

I hope I've helped you, all that said, keep in mind that your original question was answered correctly by several other people on here. They all provided the correct code for not executing something if the parent has a particular class. In the future, when asking questions, please be careful to articulate exactly what issue you're having. You were asking something along the lines of "how can I toggle size based upon focus" not "if parent hasclass then do not apply...". The other answers did answer your question. The problem is you weren't asking the right question.

Solution 2

if (!$(this).parent().hasClass('cooling'))
{
    //your function
}

Solution 3

Try this:

if( !$(this).parent().hasClass('cooling') ){
    inputWidth();
}

Comments

[mcmwhfy]

my problem is when the input is expand because if you will click many times on that input the width remain width:350 and on blur doesn't know to run back. If I put this to be applied only when hasClass('cooling') is not enough :(

[mcmwhfy]

my problem is when the input is expand because if you will click many times on that input the width remain width:350 and on blur doesn't know to run back. If I put this to be applied only when hasClass('cooling') is not enough :(

[mcmwhfy]

I need that class because it must be added to input parent which is a div in order to set him a margin right when the input is expanding because if not the input will override the other input from my app. However, thank you very much for your answer and patience. This really helped me :)

[PriorityMark]

That's easy enough to add back in, the crux of this answer has nothing to do with that class.