CODEWITHSUNDEEP
jquery
meck373
meck373

Reputation: 1124

jquery each only returns first value

i would like to go through each person and get the image size. With the height and width i can set the the height and width for the div ".text-person-show". 

$(window).load(function () {
    $(".person").each(function () {
        var h = $(this).find(".person-image").height();
        var w = $(this).find(".person-image").width();

        $(this).hover(function () {
            alert(w);
            $(this).find(".person-image").toggle();
            $(this).find(".text-person").toggle();
            $(this).find(".text-person").toggleClass("text-person-show", 'add');
            $(".text-person-show").width(w).height(h);
        });
    });
});

html:

<div class="person">
<div class="person-post">
    <div class="person-image">  <img src="<?php the_field('image'); ?>"></div>
        <div class="text-person">
            <div class="text-inner">
                 <div class="name-person-text-inner"><?php the_title(); ?>
                 </div>     
            </div>
        </div>
</div>

Question is: Why do i get only the alert(w) for the first ".person"? I don't get right now! variable scope?

Many Thx!!!

Upvotes: 0

Views: 208

Answers (1)

Neel
Neel

Reputation: 11721

try below code and use .on event for future events and also remove each loop .

$(window).load(function () {                    
        $('.person').on('hover', function () {
        var h = $(this).find(".person-image").height();
        var w = $(this).find(".person-image").width();

            alert(w);
            $(this).find(".person-image").toggle();
            $(this).find(".text-person").toggle();
            $(this).find(".text-person").toggleClass("text-person-show", 'add');
            $(".text-person-show").width(w).height(h);
        });
       });

Side Note As suggested by David Thomas:-

on() has been available in jQuery from version 1.7 (at which point live() was deprecated). In jQuery prior to 1.7 the jQuery team recommended, in the API documentation for the method itself, the use of delegate(). live() has a number of problems (chaining, event-bubbling and performance), and should not be used even where it's available (unless the trade-offs in the documentaiton for the method are acknowledged).

Upvotes: 2

Related Questions