如何使用包含A,B,C,D ......的值向上或向下移动div

时间:2017-02-08 10:09:22

标签: jquery

<div style="width:450px;height:200px;border:0px solid red;overflow:auto;padding:0;text-align:left" id="items">
    <div style="padding:3px;border:1px solid green;width:399px;">
        <span>1. </span><span>A</span>
    </div>
    <div style="padding:3px;border:1px solid green;width:399px;">
        <span>2. </span><span>B</span>
    </div>
    <div style="padding:3px;border:1px solid green;width:399px;">
        <span>3. </span><span>C</span>
    </div>
    <div style="padding:3px;border:1px solid green;width:399px;">
        <span>4. </span><span>D</span>
    </div>
    <div style="padding:3px;border:1px solid green;width:399px;">
        <span>5. </span><span>E</span>
    </div>
    <div style="padding:3px;border:1px solid green;width:399px;">
        <span>6. </span><span>F</span>
    </div>
    <div style="padding:3px;border:1px solid green;width:399px;">
        <span>7. </span><span>G</span>
    </div>
    <div style="padding:3px;border:1px solid green;width:399px;">
        <span>8. </span><span>H</span>
    </div>
    <div style="padding:3px;border:1px solid green;width:399px;">
        <span>9. </span><span>I</span>
    </div>
    <div style="padding:3px;border:1px solid green;width:399px;">
        <span>10. </span><span>J</span>
    </div>
    <div style="padding:3px;border:1px solid green;width:399px;">
        <span>11. </span><span>K</span>
    </div>
    <div style="padding:3px;border:1px solid green;width:399px;">
        <span>12. </span><span>L</span>
    </div>
    <div style="padding:3px;border:1px solid green;width:399px;">
        <span>13. </span><span>N</span>
    </div>
</div>

我想使用包含A,B,C,D的索引向上或向下移动span标记,而不移动数字span标记

1 个答案:

答案 0 :(得分:0)

这就是你要找的东西:

function moveUp(s)
{
    $("span:contains('"+s+"')").parent().insertBefore($("span:contains('"+s+"')").parent().prev());
    order();
}

function moveDown(s)
{
    $("span:contains('"+s+"')").parent().insertAfter($("span:contains('"+s+"')").parent().next());
    order();
}

function order()
{
    var i=1;
    $("div#items span:first-child").each(function(){
        $(this).html(i+". ");
        i++;
    });
}


$("document").ready(function(){
    moveUp("C");
    moveDown("A");
});

之前:

1. A
2. B
3. C
4. D

后:

1. C
2. A
3. B
4. D