Question

非常简单的解决方案我肯定但是不能为我的生活做出努力！任何帮助非常感谢...

基本上我有四个'li'，每个都有自己的'p'。使用jQuery，我想用类“overlay”创建一个新的'div'，然后将每个'p'移动到相应的'div'。

到目前为止，我已设法创建'div'但最终将所有四个'p'标签复制到所有四个'div'中......

进行了模拟

我的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>

我的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;
}

我的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);
            });
});

非常感谢...

Answer 1

试试这个：

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

jQuery appendTo - 将特定的<p>标记同时附加到特定的</p> <div>标记</div>

1 个答案: