对于每个奇数表行，使用jQuery交换表单元格

Question

对于每个奇数表行，使用jQuery交换表单元格

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"));

- Jayson LaFrance

你真的应该考虑使用后端来实现这个功能。像这样在JavaScript中来回切换是一个糟糕的解决方案。Drupal应该有一些方法来实现这个功能。 - OptimusCrime

你有任何想法应该如何实现吗，@OptimusCrime？我的合作伙伴负责构建网站，而我只是负责主题和依靠jQuery进行视觉操作。 - Jayson LaFrance

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Luis Tellez · Answer 1

你可以这样做来改变赔率的顺序，只需改变子元素的顺序即可。

 $(function() {
        jQuery.each($(".odd"), function() { 
            $(this).children(":eq(1)").after($(this).children(":eq(0)"));
        });
    });

这里是可以正常工作的 Fiddle。http://jsfiddle.net/77pHb/

- Andrew Whitaker · Answer 2

这样怎么样：

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

以下是正在发生的事情：

选择器返回每个奇数表行的“image”列。
.after 函数可以接受一个函数。该函数对 jQuery 对象中的每个项目执行一次。
在传递给 .after 的函数内，我们返回要插入当前正在迭代的项“后面”的元素。在我们的情况下，我们想要直接前面的那个元素（“title”元素）。我们可以使用 .prev 来检索它。

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