简单的div排序与jquery无法正常工作

Question

在jsfiddle上，一切都很完美，但不是在＆＃34; web＆＃34;

我可以在 2 下移动 1 ，但在 3 下移动 1 （在＆＃34;网络＆ ＃34）

直播jsfiddle（在jsfiddle上一切正常）

HTML

<div class="parent">

    <div id="parent_child1"> 
        <span class="title">1</span>
         <span class="down" onclick="down('parent_child1')">down</span>
         <span class="up" onclick="up('parent_child1')">up</span>
    </div>

    <div id="parent_child2"> 
        <span class="title">2</span>
         <span class="down" onclick="down('parent_child2')">down</span>
         <span class="up" onclick="up('parent_child2')">up</span>
    </div>

    <div id="parent_child3"> 
        <span class="title">3</span>
         <span class="down" onclick="down('parent_child3')">down</span>
         <span class="up" onclick="up('parent_child3')">up</span>
    </div>

    <div id="parent_child4"> 
        <span class="title">4</span>
         <span class="down" onclick="down('parent_child4')">down</span>
         <span class="up" onclick="up('parent_child4')">up</span>
    </div>


</div> 

的JavaScript

function down(id) {

    var nextDiv = $("#"+id).next()[0].id;
    $("#"+nextDiv).after($("#"+id));

}

function up(id) {

    var nextDiv = $("#"+id).prev()[0].id;
    $("#"+nextDiv).before($("#"+id));

}

CSS

.parent {
    width:300px;
}
.parent > div {
    width:230px;
    border:1px solid blue;
    float:left;
}
.parent div span.title {
    width:130px;
    height:30px;
    float:left;
}
.parent div span.down {
    text-align:center;
    width:50px;
    height:30px;
    background:green;
    float:left;
    cursor:pointer;
}
.parent div span.up {
    text-align:center;
    width:50px;
    height:30px;
    background:red;
    float:left;
    cursor:pointer;
}

Answer 1

你可以尝试这样的事情，也许这也适用于你的网站：

http://jsfiddle.net/nzx2bz3r/

function down(obj) {
    $(obj).parent().next().after($(obj).parent())
}

function up(id) {
     $(obj).parent().prev().before($(obj).parent())
}

HTML

<div id="parent_child1"> 
    <span class="title">1</span>
    <span class="down" onclick="down(this)">down</span>
    <span class="up" onclick="up(this)">up</span>
</div>