javascript - 在父级内部移动具有相同类的多个 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 一起移动到一行中，并将所有标签文本 div 向下移动并给每个它自己的行。我只想将它们移动到它们的父元素中(以避免来自一个论坛用户的图像/标签转到另一个用户)。

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

编辑:更多详细信息的屏幕截图:

编辑:我试过这个:

$('.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