そのため、私の Web サイトは enjin.com でホストされており、ユーザーに画像付きのタグを付けると、その名前の下にフォーラムに表示されますが、タグ名が縦に並んだリストになります。すべてのタグ画像が 1 行に表示され、すべてのタグ名がその下の水平リストに表示されるように整理したいと考えています。
彼らはこのように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 を 1 行にまとめて移動し、すべてのタグ テキスト 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));
});
}
同じ結果です。