Question

Pretty simple solution I’m sure but can’t for the life of me work it out! Any help much appreciated…

Basically I have four ‘li’s each with its own ‘p’. With jQuery I’d like to create a new ‘div’ with class “overlay” and then move each ‘p’ into the respective ‘div’.

So far I have managed to create the ‘div’ but then end up copying all four ‘p’ tags into all four ‘div’s…

Have put a mock up at http://jsfiddle.net/NhezT/4/

My HTML:

<ul class="cat_ul">
    <li class="cat_li music_production">
        <div class="cat_bxs">
            <a href="#"><img class="cat_img" src="#"></a>
        </div>
        <p class="legend">Music Production</p>
    </li>
    <li class="cat_li web_development">
        <div class="cat_bxs">
            <a href="<#"><img class="cat_img" src="#"></a>
        </div>
        <p class="legend">Web Development</p>
    </li>
    <li class="cat_li online_promotion">
        <div class="cat_bxs">
            <a href="#"><img class="cat_img" src="#"></a>
        </div>
        <p class="legend">Online Promotion</p>
    </li>
    <li class="cat_li tutor_mentor">
        <div class="cat_bxs">
            <a href="#"><img class="cat_img" src="#"></a>
        </div>
        <p class="legend">Tutor And Mentor</p>
    </li>
</ul>​

My CSS:

.cat_ul {
    list-style: none;
    width: 840px;
    margin: 0;
    padding: 0;
}
.cat_li {
    cursor: pointer;
    float: left;
    margin: 0 10px;
}
.cat_bxs {
    position: relative;
    width: 170px;
    height: 170px;
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(rgba(255,255,255,0)), to(rgba(0,0,0,.15)));
    background: -webkit-radial-gradient(circle, rgba(255,255,255,0), rgba(0,0,0,.15));
    background: -moz-radial-gradient(circle, rgba(255,255,255,0), rgba(0,0,0,.15));
    background: -ms-radial-gradient(circle, rgba(255,255,255,0), rgba(0,0,0,.15));
    background: -o-radial-gradient(circle, rgba(255,255,255,0), rgba(0,0,0,.15));
    background-repeat: no-repeat;
}
.cat_bxs a {
    display: block;
}
.cat_bxs a img {
    width: 50%;
    height: 50%;
    margin: 25% 25%;
}
.cat_li .overlay {
    display: table;
    position: absolute;
    width: 150px;
    height: 150px;
    left: 0;
    top: 0;
    padding: 10px;
    background: rgba(0,0,0,.5);
    opacity: 0;
}
.cat_li.music_production .overlay {
    background: rgba(216,182,24,.5);
}
.cat_li.web_development .overlay {
    background: rgba(92,164,64,.5);
}
.cat_li.online_promotion .overlay {
    background: rgba(166,66,66,.5);
}
.cat_li.tutor_mentor .overlay {
    background: rgba(41,140,191,.5);
}
.cat_li .overlay p {
    display: table-cell;
    position: relative;
    vertical-align: middle;
    text-transform: uppercase;
    font-size: 10px;
    text-align: center;
    line-height: 2em;
    width: 100%;
    height: 100%;
    color: #333;
}​

My JavaScript:

// Append Function (Broken)

$(document).ready(function () {
    $('.cat_bxs').append('<div class="overlay"></div>');

    $('.cat_li').each(function(){
        $(this).children('.legend').appendTo('.overlay');

    });
});


//Hover Fade

$(document).ready(function () {   
            $(".cat_bxs").hover(function () {
                $("a", this).animate({
                    "opacity": "0.25"
                }, 600, function () {
                    $(this).next(".overlay").animate({
                        "opacity": "1"
                    }, 500);
                });
            }, function () {
                var self = this;
                var inter = setInterval(function () {
                    if (!$(".overlay", self).is(':animated') && !$(".overlay", self).prev("a").is(':animated')) {
                        clearInterval(inter);
                        $(".overlay", self).animate({
                            "opacity": "0"
                        }, 500, function () {
                            $(this).prev("a").animate({
                                "opacity": "1"
                            }, 600);
                        });
                    }
                }, 100);
            });
});

​
Many thanks in advance…

Answer 1

Try this:

$('.cat_li').each(function(){
    var $li = $(this);        
    $li.find('.legend').appendTo($li.find('.overlay'));
});