我可以通过其他 jQuery 方法修改用作 insertAfter 参数的选择器吗？

Question

我想将所选元素的第二个 tr 父级移动到另一个所选元素的第二个 tr 父级之后。我可以在 2 行中以多种方式执行此操作，但我可以在一行中执行此操作吗？

由于糟糕的 CMS 嵌套了一堆元素并只为少数元素提供了 ID 属性，这是我的起始 HTML 结构：

<tr>
    <td>
        <table>
            <tbody>
                <tr>
                    <td>
                        <div id="element1">
                            [...]
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>
<tr>
    <td>
        <table>
            <tbody>
                <tr>
                    <td>
                        <div id="element2">
                            [...]
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>
<tr>
    <td>
        <table>
            <tbody>
                <tr>
                    <td>
                        <div id="element3">
                            [...]
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>

当然，我的重复模式比三个多得多，但这就是结构。我需要重新排列这些外部 tr 元素。我试过这个：

jQuery("div#element3").parents("tr").eq(1).detach().insertAfter("div#element1").parents("tr").eq(1);

但是当它运行时，它的行为就好像我输入了：

jQuery("div#element3").parents("tr").eq(1).detach().insertAfter("div#element1");

有没有办法在一行中不是对选择器参数选择的元素执行 insertAfter，而是对通过对该选择器的结果应用其他方法选择的元素执行 insertAfter？将选择器周围的括号加倍加上以下方法尝试将它们分组为操作目标不起作用。

显然，我可以通过声明一个 var 来解决这个问题 ("div#element1").parents("tr").eq(1)，并将其作为参数传递给 insertAfter——但是我不敢相信我不能在一行代码中做到这一点，而且由于我必须以一种任意的、不可循环的方式进行大量这些操作，我肯定更喜欢一行代码。

谢谢！

Answer 1

您需要将第二个 div 的父遍历放在 insertAfter() 中并使其成为一个新的 jQuery 对象

也可以去掉detach()。这将自动完成，因为一个元素不被克隆就不能存在于两个地方。

jQuery("div#element3").parents("tr").eq(1).detach()
     .insertAfter(jQuery("div#element1").parents("tr").eq(1));

就我个人而言，我会打破这个。将所有内容放在一条长线上与使其可读相比，值得多加几行

类似于：

var $toMove = jQuery("div#element3").parents("tr").eq(1);
var $target = jQuery("div#element1").parents("tr").eq(1);
$target.after($toMove)

最后一个建议是，如果您有多个像这样的遍历要做的是尝试在页面加载时添加一些类以使以后的遍历更简单

然后你可以这样做：

var $toMove = jQuery("div#element3").closest("tr.main-rows");
var $target = jQuery("div#element1").closest("tr.main-rows");
$target.after($toMove)

我可以通过其他 jQuery 方法修改用作 insertAfter 参数的选择器吗？

Can I modify a selector used as param of insertAfter via other jQuery methods?

jquery

insertafter