我能够获得有关我想要修改的元素的正确输出，但现在我需要获取之前的兄弟ID，以便我也能对该元素执行操作..但我不能似乎让它发挥作用。
使用Javascript：
$(".sort-up").click( function() {
var curSel = $(this).parent().parent();
var curSelID = $(this).parent().parent().attr("id");
var output = "You clicked on " + curSelID + ".\n";
var curSet = curSelID.split("_");
var curItem = curSet[1];
output = output + "The item ID for this is " + curItem + ".\n";
var classes = $("#" + curSelID).attr("class");
var classGrp = classes.split(" ");
var type = classGrp[classGrp.length - 1];
output = output + "The Type is " + type + ".\n";
var index = $(this).parent().parent().index("."+type);
output = output + "The Index is " + index + ".\n";
if (index == 0) {
alert("Already at the top, can't move up.");
} else {
alert(output);
var prevSel = $("#" + curSelID).prev().attr("id");
output = "Div ID to target is " + prevSel + "\n";
alert(output);
}
});
当我执行此脚本时，我会获得有关＆＃34;当前＆＃34;的所有详细信息。项目我点击如下：
You clicked on 2_3.
The item ID for this is 3.
The Type is Request.
The Index is 2.
html（：TLDR - 只显示结构）
<div class="requests" name="requests" id="requests">
<div name="2_2" id="2_2" class="rowPri pl10 Request">
<div class="sortIcons">
<img class="sort-up" src="../images/sortOrderASC.png">
<img class="sort-down" src="../images/sortOrderDESC.png">
<div class="clr"></div>
</div>
<div class="req-title request-toggle">Create Public Facing Calendar</div>
<div class="req-status">Complete</div>
<div class="req-date">06-04-15</div>
<div class="clr"></div>
<div id="request_2_items" style="display:none;" class="pl45 items">
<div class="pl10 item ui-state-default Item" name="3_6" id="3_6">
<div class="sortIcons">
<img class="sort-up" src="../images/sortOrderASC.png">
<img class="sort-down" src="../images/sortOrderDESC.png">
<div class="clr"></div>
</div>
<div class="item-details item-toggle">Connect PHP calendar to jCalPro back end</div>
<div class="item-status">Complete</div>
<div class="item-date">06-04-15</div>
<div class="clr"></div>
<div id="item_6_comments" style="display:none;" class="pl80 comments">
<div class="pl10">
<div class="com-date">2015-06-04</div>
<div class="com-com">Database connected </div>
<div class="clr"></div>
</div>
</div>
</div>
</div>
</div>
<span class="divider"></span>
<div name="2_8" id="2_8" class="rowPri pl10 Request">
<div class="sortIcons">
<img class="sort-up" src="../images/sortOrderASC.png">
<img class="sort-down" src="../images/sortOrderDESC.png">
<div class="clr"></div>
</div>
<div class="req-title request-toggle">Do Something</div>
<div class="req-status">Complete</div>
<div class="req-date">06-04-15</div>
<div class="clr"></div>
<div id="request_8_items" style="display: block;" class="pl45 items">
<div class="pl10 item ui-state-default Item" name="3_9" id="3_9">
<div class="sortIcons">
<img class="sort-up" src="../images/sortOrderASC.png">
<img class="sort-down" src="../images/sortOrderDESC.png">
<div class="clr"></div>
</div>
<div class="item-details item-toggle">Do Part of something</div>
<div class="item-status">Complete</div>
<div class="item-date">06-04-15</div>
<div class="clr"></div>
<div id="item_9_comments" style="" class="pl80 comments">
<div class="pl10">
<div class="com-date">2015-06-04</div>
<div class="com-com">Did a little more</div>
<div class="clr"></div>
</div>
<div class="pl10">
<div class="com-date">2015-06-04</div>
<div class="com-com">Did a little</div>
<div class="clr"></div>
</div>
</div>
</div>
<div class="pl10 item ui-state-default Item" name="3_10" id="3_10">
<div class="sortIcons">
<img class="sort-up" src="../images/sortOrderASC.png">
<img class="sort-down" src="../images/sortOrderDESC.png">
<div class="clr"></div>
</div>
<div class="item-details item-toggle">Do more of part of something</div>
<div class="item-status">Complete</div>
<div class="item-date">06-04-15</div>
<div class="clr"></div>
<div id="item_10_comments" style="" class="pl80 comments">
</div>
</div>
</div>
</div>
<span class="divider"></span>
<div name="2_3" id="2_3" class="rowPri pl10 Request">
<div class="sortIcons">
<img class="sort-up" src="../images/sortOrderASC.png">
<img class="sort-down" src="../images/sortOrderDESC.png">
<div class="clr"></div>
</div>
<div class="req-title request-toggle">Create Event Addition page</div>
<div class="req-status">Complete</div>
<div class="req-date">06-04-15</div>
<div class="clr"></div>
<div id="request_3_items" style="display:none;" class="pl45 items">
</div>
</div>
<span class="divider"></span>
<div name="2_4" id="2_4" class="rowPri pl10 Request">
<div class="sortIcons">
<img class="sort-up" src="../images/sortOrderASC.png">
<img class="sort-down" src="../images/sortOrderDESC.png">
<div class="clr"></div>
</div>
<div class="req-title request-toggle">Create Edit Event Page</div>
<div class="req-status">Complete</div>
<div class="req-date">06-04-15</div>
<div class="clr"></div>
<div id="request_4_items" style="display:none;" class="pl45 items">
</div>
</div>
<span class="divider"></span>
<div name="2_5" id="2_5" class="rowPri pl10 Request">
<div class="sortIcons">
<img class="sort-up" src="../images/sortOrderASC.png">
<img class="sort-down" src="../images/sortOrderDESC.png">
<div class="clr"></div>
</div>
<div class="req-title request-toggle">Create Class Cards (Regiatration) page</div>
<div class="req-status">Complete</div>
<div class="req-date">06-04-15</div>
<div class="clr"></div>
<div id="request_5_items" style="display:none;" class="pl45 items">
</div>
</div>
</div>
基本上，如果我点击了课程＆＃34; .request＆＃34;编号＆＃34; 2_3＆＃34;我需要上课和＃34; .request＆＃34;这将是＆＃34; 2_8＆＃34;的div。然后我将使用它作为AJAX调用来交换数据库中这些项目的顺序，然后在屏幕上，但是对于我的生活，我似乎无法获得＆＃34;之前的＃34的ID ;兄弟姐妹。
这个相同的脚本适用于班级＆＃34; .item＆＃34;还有诸如＆＃34; 3-10＆＃34;需要获得＆＃34; 3-9＆＃34;的div ID。我正在编写这个脚本，以便在任何级别工作，所以我不必写两次。
我研究过.parent（）,. prev（）等等，并且无法获得工作方法。任何帮助将不胜感激。
更新1：
我尝试将下面的答案调整为＆＃34;移动＆＃34;这些项目，但它似乎有点围绕我点击的兄弟姐妹，而不是只是移动我点击其上一个兄弟之上的兄弟姐妹。这是我试过的Javascript：
if (index == 0) {
alert("This item is already top priority.");
} else {
var swapSel = curSel.siblings().prev();
$(curSel).before($(swapSel));
}
更新2：
我搞砸了它并且能够让它将有问题的DIV移到它的前面＆＃34;之前＆＃34;兄弟姐妹，没有使用兄弟姐妹（），因为这是抱怨的事情。我使用以下Javascript完成了现有HTML结构的UP和DOWN移动：
$(".sort-up").click( function() {
var curSel = $(this).parent().parent();
var curSelID = $(this).parent().parent().attr("id");
var curSet = curSelID.split("_");
var curItem = curSet[1];
var classes = $("#" + curSelID).attr("class");
var classGrp = classes.split(" ");
var type = classGrp[classGrp.length - 1];
var index = curSel.index();
if (index <= 0) {
alert("This " + type + " is already highest priority.");
} else {
var swapSel = curSel.prev();
var swapSelID = swapSel.attr("id");
$(curSel).insertBefore($(swapSel));
}
});
$(".sort-down").click( function() {
var curSel = $(this).parent().parent();
var curSelID = $(this).parent().parent().attr("id");
var holder = curSel.parent();
var curSet = curSelID.split("_");
var curItem = curSet[1];
var classes = $("#" + curSelID).attr("class");
var classGrp = classes.split(" ");
var type = classGrp[classGrp.length - 1];
var index = curSel.index();
var lastIndex = curSel.siblings().andSelf().length - 1;
if (index >= lastIndex) {
alert("This " + type + " is already lowest priority.");
} else {
var swapSel = curSel.next();
var swapSelID = swapSel.attr("id");
$(curSel).insertAfter($(swapSel));
}
});
答案 0 :(得分：2)
使用siblings方法获取curSel对象的兄弟节点，然后使用prev（）方法获取cur选择之前的兄弟节点。你可以改变它：
var prevSel = curSel.siblings().prev().attr('id');
更新
改变了op的问题：
你的HTML有点奇怪，但这似乎做你想要的。我最终不得不使用前一个siblling的id来使insertBefore（而不是之前）工作。此外，您还需要弄清楚如何处理这些分隔线跨度。此外，你有嵌套的项目，你可以不检查它们在嵌套层次结构的顶部，所以你需要处理它。
$(curSel).insertBefore($('#'+prevSel));
最终编辑：
所以看起来问题是你正在使用的分隔符跨度的组合和陈旧的元素引用，这显然是jquery中已知的bug。
如果在移动前一个元素后重新取样单击的元素，则删除分隔它们的原始分隔符跨度，然后在现在的第一个元素之后添加新的分隔符跨度，它按预期工作。看到我更新的小提琴。