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. IDが105の要素に新しいdiv要素を追加したいのですが、最後または最初に追加したくありません。div他の要素の前にある必要があります。

  2. IDが109の要素に示されているように、ボタンが使用された場合、IDが105divの最初の要素としてボタンを移動するにはどうすればよいですか？div

4

3 に答える 3

4

before次の方法を使用できます。

一致した要素のセット内の各要素の前に、パラメーターで指定されたコンテンツを挿入します。

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

フィドル

IDは一意である必要があり、ページのDoctypeがHTML5でない場合、IDは文字で始まる必要があることに注意してください。

ボタンのdivの親を最初のdivに移動する場合は、次のことを試すことができます。

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

フィドル

于 2012-08-17T21:33:52.463 に答える
0

IDは文字で始まる必要があり、一意である必要があります。2#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

編集：私が元の答えを書いたとき-「前に移動」は1つ上に移動する必要があると思いました。「最初に移動する」という要件に一致するように回答を変更しました

彼/彼女が最初に答えたので、ポイントはまだ「未定義」に属しているはずです。私はこのように私の答えを残すことができませんでした:)

これが、以下で説明するコードの完全なフィドルです。最初の問題では、たとえば、他の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 に答える