jQuery offset().top is undefined

Question

jQuery

$('.add-to-cart2').on('click', function () {
    var cart = $('.cart');
    var imgtodrag = $(this).parent('.item').find("img").eq(0);
    if (imgtodrag) {
        var imgclone = imgtodrag.clone()
            .offset({
            top: imgtodrag.offset().top,
            left: imgtodrag.offset().left
        })
            .css({
            'opacity': '0.5',
                'position': 'absolute',
                'height': '150px',
                'width': '150px',
                'z-index': '100'
        })
            .appendTo($('body'))
            .animate({
            'top': cart.offset().top + 10,
                'left': cart.offset().left + 10,
                'width': 75,
                'height': 75
        }, 1000, 'easeInOutExpo');

        setTimeout(function () {
            cart.effect("shake", {
                times: 2
            }, 200);
        }, 1500);

        imgclone.animate({
            'width': 0,
                'height': 0
        }, function () {
            $(this).detach()
        });
    }
});

HTML

<li>
    <div class="polaroid item">
        <p>
             <button class="add-to-cart2" type="button">
                   Add to cart
             </button>
        </p>
        <img src="/img/rawr.png" alt="item">
    </div>
</li>

Error

Uncaught TypeError: Cannot read property 'top' of undefined

Hey,

I found a tutorial on how to create a fly animation for items into the cart section, but at the moment I get a error that tells me the offset.top are undefined. I have tried to solve it and the reason this happens what I think is that it can't find the image so the variable "imgtodrag" does not have anything to drag.

I would be happy if someone could see the fault in the code! :)

you have to either you parents() or closest(). parent() is only one level and hence it refers to
element. using parents() or closest() will solve your problem. parents() will be a more optimal solution since in this case you can be pretty sure "this" does not refer to item var imgtodrag = $(this).closest('.item').find("img").eq(0); or var imgtodrag = $(this).parents('.item').find("img").eq(0); parents() is better — wallop, May 04 '15 at 11:22
since you are using parent(), imgtodrag is null and hence the error — wallop, May 04 '15 at 11:22

Pranav C Balan · Answer 1 · 2015-05-04T11:23:26.527

1

You need to use closest() instead of parent()

var imgtodrag = $(this).closest('.item').find("img").eq(0);

Because .item is not immediate parent of .add-to-cart2, parent() only travels a single level up the DOM tree. So you need to use closest() , that travels up the DOM tree until it finds a match.

edited May 04 '15 at 11:23

answered May 04 '15 at 11:17

Pranav C Balan

113,687
23
165
188

That worked great thanks! Is there a reason it did not work with parent ? – Eric Christensen May 04 '15 at 11:22
you have to either you parents() or closest(). parent() is only one level and hence it refers to
element. using parents() or closest() will solve your problem. parents() will be a more optimal solution since in this case you can be pretty sure "this" does not refer to item. var imgtodrag = $(this).closest('.item').find("img").eq(0); or var imgtodrag = $(this).parents('.item').find("img").eq(0); parents() is better . since you are using parent(), imgtodrag is null and hence the error
– wallop May 04 '15 at 11:23

score 1 · Answer 2 · answered May 04 '15 at 11:22

1

You can find img without parent():

var imgtodrag = $(".add-to-cart2").find("img").eq(0);

answered May 04 '15 at 11:22

Manwal

23,450
12
63
93

jQuery offset().top is undefined

2 Answers2