【问题标题】:Javascript insertAfter & insertBeforeJavascript insertAfter & insertBefore
【发布时间】:2023-03-16 05:47:01
【问题描述】:

我正在使用 javascript 函数 insertAfter 和 insertBefore,但是我正在尝试 insertAfter 和 insertBefore 2 个元素。

例如,考虑下面的 HTML

<table>
    <tbody>
        <tr>
            <td>
                Item 1
            </td>
            <td>
                <div class="moveUpDown">
                    <div class="up">
                    </div>
                    <div class="down">
                    </div>
                    <div>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <table>
                    <tr>
                        <td>
                            1
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                Item 2
            </td>
            <td>
                <div class="moveUpDown">
                    <div class="up">
                    </div>
                    <div class="down">
                    </div>
                    <div>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <table>
                    <tr>
                        <td>
                            1
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
</table>

然后我有这个javascript代码sn-p

var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
    row.insertBefore(row.prev());
} else {
    row.insertAfter(row.next());
}

基本上调用Up类时,上一行上移,调用Down类时,当前行下移一行。

我想要做的是将行向上/向下移动 2 行...意思是类似于 row.prev().prev() 或 row.next().next() 但这似乎不起作用.

有没有简单的方法解决这个问题?

谢谢,如果有任何帮助/建议,将不胜感激。

【问题讨论】:

    标签: javascript jquery javascript-events


    【解决方案1】:

    上升

    row.prev().prev().before(row)
    

    往下走

    row.next().next().after(row)
    

    显然 tr 必须存在 prev/next 必须存在

    注意,您将行缓存为第一个 tr 元素,因此每次第一个 tr 元素更改时,行都会更改

    收听活动

    $("table").on("click","tr > td > span.moveup", function() {
      var row = $(this).parent().parent();
    
     if (row.prev().prev().get(0)) row.prev().prev().before(row)
    
    })
    

    【讨论】:

    • 我把这个代码: $(document).on("click", "tr > td div.up", function() { var row = $(this).parent().parent (); if (row.prev().prev().get(0)) row.prev().prev().before(row) }) ... 但是行没有移动?
    • @Kelish 您的 div 嵌套在另一个 div 中!你需要再添加一个父母并且它正在工作:jsfiddle.net/4ZwWv
    • @Kelish fiddle 已经消失了抱歉,无论如何你必须添加一个 parent() 来获得一个 tr 行,就是这样
    • 感谢 mikakun,现在很有意义!
    猜你喜欢
    • 2011-12-01
    • 2013-06-05
    • 1970-01-01
    • 1970-01-01
    • 2014-05-29
    • 1970-01-01
    • 2010-09-24
    • 2013-05-25
    • 2012-01-23
    相关资源
    最近更新 更多