在父级内移动具有相同类的多个Div

Question

因此，我的网站托管在enjin.com上，当您向用户提供带有图片的标签时，它会以其名称显示在论坛上，但它是一个带有标签名称的垂直列表。我想组织它，以便所有标记图像出现在一行上，所有标记名称都显示在它下面的水平列表中。

他们使用div标签，有点像这样

<div class="tag">
    <div class="tag-image"></div> <!-- If the tag lacks an image this is excluded -->
    <div class="tag-text">Tag Name</div> <!-- If you want the name to be hidden this is excluded -->
</div>

然后他们几乎为每个标签重复这个。论坛帖子也有同样的用法。

所以，我想将所有标记图像div一起移动到一行上，并且所有标记文本都按下并给每个标记文本自己的行。我只想在他们的父元素中移动它们（以避免一个论坛用户的图像/标签转到另一个）。

我知道如何使用jquery附加内容并且已经搜索了如何移动元素，但是我担心它们会在另一个用户的头像下一起结束。

编辑： 截图更多细节：

编辑： 我试过这个：

$('.tag-image').each(function(){
    $(this).parent().find('.cell').append($(this));
});

什么都没发生。我怀疑这个脚本应该放在head标签中才能工作，如果这是我需要的。我不能用我的平台做到这一点，但我正在努力解决这个问题，因为我之前遇到过这个问题。

编辑： 试图这样：

window.addEventListener('DOMContentLoaded', moveimgs, false);
    function moveimgs(){
        $('.tag-image').each(function(){
            $(this).parent().find('.cell').append($(this));
        });
}

同样的结果。

Answer 1

我不确定你要做什么，但如果它是这样的，那么你应该使用表格。

<table class="tag">
    <tr>
        <td><div class="tag-image">
            <img src="http://us.123rf.com/400wm/400/400/danomyte/danomyte0811/danomyte081100001/3807403-superhero-getting-ready-for-action.jpg" width="30px"/>
        </div></td>
        <td><div class="tag-text">Tag Name</div></td>
    </tr>


    <tr>
        <td><div class="tag-image">
            <img src="http://us.123rf.com/400wm/400/400/danomyte/danomyte0811/danomyte081100001/3807403-superhero-getting-ready-for-action.jpg" width="30px"/>
        </div></td>
        <td><div class="tag-text">Tag Name</div></td>
    </tr>

    <tr>
        <td><div class="tag-image">
            <img src="http://us.123rf.com/400wm/400/400/danomyte/danomyte0811/danomyte081100001/3807403-superhero-getting-ready-for-action.jpg" width="30px"/>
        </div></td>
        <td><div class="tag-text">Tag Name</div></td>
    </tr>
</table>

js fiddle