Question

使用以下代码：

<script type="text/javascript">
function moveFront(el){
    var me = $('#'+el.closest('div').attr('id'));
    var parent = me.parent();
    parent.find('div:first').prepend(me);
    //?
}
</script>
<div class="comments">
<div id="105">
    105
    <p>...</p>
    <form>...</form>

    <div id="116">
        116
    </div>
    <div id="106">
        106
    </div>
    <div id="109">
        109
        <button onclick="moveFront($(this));"></button>
    </div>
</div>
</div>

我想在ID为105的元素中添加一个新的div元素，但是，我不希望它在结尾或开头。它应该在其他div元素之前。
如果使用了一个按钮，如ID为109的div元素所示，我如何将其作为ID为105的第一个div元素移动？

Answer 1

您可以使用before方法：

在匹配元素集中的每个元素之前插入由参数指定的内容。

$('#105 div:first').before('<div id="115"></div>')
$('#109').appendTo($('#105 div:first'))

Fiddle

请注意，ID必须是唯一，如果网页的doctype不是HTML5，则ID必须以字母开头。

如果您想将按钮的div父级移动到第一个div，您可以尝试：

function moveFront(el){
     el.closest('div').prependTo($('#105 div:first'))
}

Fiddle

Answer 2

ID应以字母开头，它们应该是唯一的，您使用#109两次？

$('#105').find('div:first') //find the first div
         .before($('<div>New div before div</div>')) //insert element before it
         .end() //start over
         .prepend($('#109')); // prepend the #109 element to #105

FIDDLE

Answer 3

编辑：当我写下我的原始答案时 - 我认为“移动前线”应该向上移动一个。我修改了答案以匹配“移动到第一个”的要求

这些点应该仍然属于“未定义”，因为他/她先回答。我不能这样留下我的答案：）

以下是我将在下面介绍的代码的完整fiddle 对于第一个问题，我会用其他div包装其他div，例如

<div class="numbers">
     <div id="195">
     195
     </div>
     .... 
</div>

然后使用prepend之类的东西（伪代码）并像$('.numbers').prepend($('<div/>).text('this is a new div'))

一样使用它

使用按钮移动div的方法相同：

这是我的HTML示例：

<div id="105">
    105
    <input/>
    <button class="add-this">Add This</button>
    <div class="numbers">
        <div id="116">
            116
        </div>
        <div id="109">
            109
        </div>
        <div id="109">
            109
            <button class="move-front"> Move Front</button>
        </div>
    </div>
</div>

这是我的JavaScript示例

$(function(){    
    $("button.add-this").click(function(){
    var $val = $("input").val();
    $(".numbers").prepend($("<div/>").attr("id",$val).text($val))

    });

$(".numbers").on({
    click:function(){

       var $divToMove = $(this).parent();
       var $currentIndex = $(".numbers div").index($divToMove);

        $divToMove.remove();
        $(".numbers").prepend($divToMove);
    }
}, "button.move-front");

});

如果需要更多解释，请告诉我。

使用jQuery中的append选择div放置

3 个答案: