3

使用以下代码：

<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>

  1. 我想div在 ID 为 105 的元素中添加一个新元素，但是，我不希望它在结尾或开头。它应该在其他div元素之前。

  2. 如果使用了一个按钮，如divID 为 109 的元素中所示，我将如何将它作为divID 为 105 的第一个元素移动？

4

3 回答 3

4

您可以使用以下before方法：

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

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

小提琴

请注意，ID 必须是唯一的，如果页面的文档类型不是 HTML5，则 ID 必须以字母开头。

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

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

小提琴

于 2012-08-17T21:33:52.463 回答
0

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

小提琴

于 2012-08-17T21:40:38.297 回答
0

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

当他/她首先回答时，这些点仍应属于“未定义”。我就是不能这样离开我的答案:)

这是我将在下面描述的代码的完整小提琴对于第一个问题，例如，我将用另一个 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");

});

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

于 2012-08-17T21:44:57.987 回答