3

私は CMS で作業しており、HTML をほとんど制御できません。このテーブルを操作するには、jQuery に依存しています。私のクライアントは、各行のタイトルと画像を交互にしたいと考えています。

望ましいレイアウトは次のようになります。

[Image][Title]
[Title][Image]
[Image][Title]
[Title][Image]

これは私が取り組んでいるものの簡略化されたバージョンです:

<tbody>
<tr class="odd">
    <td class="views-field-title"></td>
    <td class="views-field-field-services-image-fid"></td>
    <td class="views-field-value0"></td>
</tr>
<tr class="even">
    <td class="views-field-title"></td>
    <td class="views-field-field-services-image-fid"></td>
    <td class="views-field-value0"></td>
</tr>
<tr class="odd">
    <td class="views-field-title"></td>
    <td class="views-field-field-services-image-fid"></td>
    <td class="views-field-value0"></td>
</tr>
<tr class="even">
    <td class="views-field-title"></td>
    <td class="views-field-field-services-image-fid"></td>
    <td class="views-field-value0"></td>
</tr>
</tbody>

私はjQueryが初めてで、.each()関数に苦労しています。これは私が得ることができた限りです：

$(".views-field-title").after($(".views-field-field-services-image-fid"));
4

2 に答える 2

0

どうですか：

$("tr.odd .views-field-field-services-image-fid").after(function () {
    return $(this).prev();
});

何が起こっているかは次のとおりです。

  • セレクターは、奇数テーブルの各行のすべての「イメージ」列を返します。
  • .after関数は関数を取ることができます。この関数は、jQuery オブジェクト内のすべてのアイテムに対して 1 回実行されます。
  • に渡す関数内で、繰り返し処理している現在の項目の後.afterに挿入する要素を返します。私たちの場合、今見ている要素 ("title" 要素) の直前にある要素が必要です。を使用して取得できます。.prev

例: http://jsfiddle.net/6zAN7/10/

于 2013-02-17T19:57:26.197 に答える