Question

我正在尝试将Grid3移动到Grid2 - 我正在使用此代码，但它不起作用，我做错了什么？

无论如何还要将Grid3中的一半Div移动到Grid1，另一半移动到Grid2？

JS

$("#grid3").appendTo("#grid2");

HTML

        <div class="wrapperA1">
            <div class="content">
                <div id="home-sectionD">
                    <div id="grid1"><!--Gird 1-->   

                        <article class="testimonial">
                        <img alt="Neal Kilburne" src="assets/images/neal kilburne.jpg"/>
                            <div>
                                <h3>Neal Kilburne</h3>
                                <p>CEO, iTEQ Global www.iteqglobal.com</p>
                                    <br>
                                <p>“Loai is a great asset to our company and provides us with great and quick responses,Such a talented designer which we have the honour of working with.” 2011 - 2012</p>
                            </div>  
                        </article>

                        <article class="testimonial">
                            <div>
                                <h3>Amanda Chui</h3>
                                <p>Owner of www.beautyroom.ca</p>
                                    <br>
                                <p>Just what my website needed! When I had finished my website, I felt that it was missing something,so I enlisted in the help of Loai. He did a great job of giving my website the professional and polished look it needed without having me wait for days on end. Thanks, Loai!” June 23, 2012</p>
                            </div>
                        </article>

                    </div><div id="grid2"><!--Gird 2-->     

                        <article class="testimonial">
                            <img alt="Geeta Martinez" src="assets/images/geeta martinez.jpg"/>
                            <div>
                                <h3>Geeta Martinez</h3>
                                <p>Lawyer &amp; Business Consultant</p>
                                    <br>
                                <p>"Leo did a great job! He designed and put together several websites for me in less than a week. He was incredibly patient and flexible throughout the whole process, and took a lot of the stress out of the whole situation for me. He is a really nice guy to work with - I really appreciated his approach! I would definitely recommend working with him". July 14, 2013</p>
                            </div>  
                        </article>

                        <article class="testimonial">
                            <div>
                                <h3>Richard Jackson</h3>
                                <p><em>Photographer www.rjpstudios.co.uk</em></p>
                                    <br>
                                <p>“Loai designed my website last year on wix though I could have done it myself loai added a proffesional touch to the design which is so important in creating the best first impeson.” 2013</p>
                            </div>
                        </article>  

                    </div><div id="grid3"><!--Gird 3-->         

                        <article class="testimonial">
                            <img alt="Glen Eric Huysamer" src="assets/images/glen eric huysamer.jpg"/>
                            <div>
                                <h3>Glen Eric Huysamer</h3>
                                <p>Specialist Service Provider.</p>
                                    <br>
                                <p>“I would like to take this opportunity to warn people who might consider using Loai Design Studio. You will have to buckle up and strap yourself in as this young designer and associates take you through the process of creating your design needs. I was pleasantly surprised from start to finish, and can say that even though Loai took control of the creative process the end result felt like it was mine. You can not go wrong with this young lad, go ahead surprise yourself”. December 30, 2011</p>
                            </div>
                        </article>

                        <article class="testimonial">
                            <div>
                                <h3>Ciprian Filip</h3>
                                <p>Founder of Pontomat.ro</p>
                                    <br>
                                <p>“Worked with Loai on designing exposure of our social media presence on Facebook for our E-commerce initiative. He is very passionate and expert in his field of work, coming with breakthrough innovations in real time. He is able to manage an end to end social media exposure with accent on clarity, effectiveness and innovation. His working capabilities are awesome and I am sure that he will make good contribution to any project he works on.”  August 4, 2011</p>
                            </div>
                        </article>

                    </div>                      
                </div>
            </div>
        </div>

Answer 1

似乎对我有用（http://jsfiddle.net/k2NMD/9/）。

在浏览器实际处理完所有html之前，您可能会过早地调用append。尝试将您的追加函数包装在$(document).ready()函数中。

$(document).ready(function () {
    $("#grid3").appendTo("#grid2");
});

Answer 2

移动确实有效（如果您在文档加载后运行代码，例如在$(document).ready()事件中）。在开发者控制台中查看元素（如果您使用的是Chrome），以查看#grid3实际上是#grid2内的<{p}}

<div id="grid2">...
    <article...>
    <article...>
    <div id="grid3">...
</div>

如果您想在grid3内移动grid2的内容，则必须使用$('#grid3').find('article').appendTo('#grid2')获取文章，这将从grid3中删除文章将其插入grid2。移动它的部分可以通过分离article并将一个插入grid1而将另一个插入grid2来完成。

将元素从div移动到另一个 - 不工作

2 个答案: